UI
Time Slider API
This component is used to create a range input for controlling the current time of playback.
# Import
js
import '@vidstack/player/define/vds-time-slider.js';
cdn
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@vidstack/player@next/cdn/define/vds-time-slider.js"
></script>
# Properties
Attribute:
value-text
Type:
string
♿ **ARIA:** Human-readable text alternative for the current slider value. If you pass
in a string containing
{currentTime} or {duration} templates they'll be replaced with
the spoken form such as 1 hour 30 minutes.
Attribute:
pause-while-dragging
Type:
boolean
Whether it should request playback to pause while the user is dragging the
thumb. If the media was playing before the dragging starts, the state will be restored by
dispatching a user play request once the dragging ends.
Attribute:
seeking-request-throttle
Type:
number
The amount of milliseconds to throttle media seeking request events being dispatched.
Attribute:
disabled
Type:
boolean
Whether the slider should be disabled (non-interactive).
Attribute:
step
Type:
number
A number that specifies the granularity that the slider value must adhere to.
Attribute:
keyboard-step
Type:
number
♿ **ARIA:** A number that specifies the number of steps taken when interacting with
the slider via keyboard.
Attribute:
shift-key-multiplier
Type:
number
♿ **ARIA:** A number that will be used to multiply the
keyboardStep when the Shift key
is held down and the slider value is changed by pressing LeftArrow or RightArrow. Think
of it as keyboardStep * shiftKeyMultiplier.
Attribute:
custom-value-text
Type:
boolean
♿ **ARIA:** Whether custom
aria-valuemin, aria-valuenow, aria-valuemax, and
aria-valuetext values will be provided.
# Events
Type:
SliderDragStartEvent
Detail:
number
Fired when the user begins interacting with the slider and dragging the thumb. The event
detail contains the current value the drag is starting at.
Type:
SliderDragEndEvent
Detail:
number
Fired when the user stops dragging the slider thumb. The event detail contains the value
the drag is ending at.
Type:
SliderValueChangeEvent
Detail:
number
Fired when the slider value changes. The event detail contains the current value.
Type:
SliderDragValueChangeEvent
Detail:
number
Fired when the slider drag value changes. The drag value indicates the last slider value that
the user has dragged to. The event detail contains the value.
Type:
SliderPointerValueChangeEvent
Detail:
number
Fired when the device pointer is inside the slider region and it's position changes. The
event detail contains the value.
# CSS Props
Learn more about cssPropsThe ratio of the slider that is filled (eg:
0.3).
The current amount of the slider that is filled (eg:
30).
The fill rate expressed as a percentage such as (eg:
30%).
The ratio of the slider that is filled up to the device pointer.
The amount of the slider that is filled up to the device pointer.
The pointer rate expressed as a percentage.
Previous
<-
Slider Video
Next
Volume Slider
->