Sliders
Slider Value
This component is used to display the current value of a slider in various formats such as a raw value, percentage, or time.
Usage
The <media-slider-value>
component displays the current value of a parent slider, or the value at the device pointer (e.g., the position at which the user is hovering their mouse over the slider).
The value can be displayed as a:
value
(e.g.,70
),percent
: uses the slider's current and max value (e.g.,70%
),time
: uses the slider's current value, assuming seconds (e.g., value of70
=1:10
).
The <media-slider-value>
component can be combined with the <media-time-slider>
to display the current time as the user hovers over the scrubber:
Or, with the <media-volume-slider>
component to display the current volume percentage:
Tailwind
INFO
A more complete slider example is available in the <media-time-slider>
docs.
Previous
<-
Volume Slider
Next
Slider Thumbnail
->