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 of 70 = 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