Slider Value Text
This component is used to display the current value of a slider in various formats such as a raw value, percentage, or time.
<script type="module" src="https://cdn.jsdelivr.net/npm/@vidstack/player@next/cdn/define/vds-slider-value-text.js" ></script>
<vds-slider-value-text> 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:
percent: uses the slider's current and max value (e.g.,
time: uses the slider's current value, assuming seconds (e.g., value of
<vds-slider-value-text> component can be combined with the
<vds-time-slider> to display the current time as the user hovers over the scrubber:
Or, with the
<vds-volume-slider> to display the current volume:
In the following example, we add a small tooltip that displays the current time the user is hovering over above the slider: