Looking for the old docs? Go here

Sliders

Time Slider

This component is used to create a range input for controlling the current time of playback.

HTMLAttributes
Ref<TimeSliderInstance>

Versatile and user-friendly input time control designed for seamless cross-browser and provider compatibility and accessibility with ARIA support. It offers a smooth user experience for both mouse and touch interactions and is highly customizable in terms of styling. Users can effortlessly change the current playback time within the range 0 to seekable end.

import { TimeSlider } from "@vidstack/react";

const Component = TimeSlider.Root;
type Props = TimeSlider.RootProps;
<TimeSlider.Root>
  <TimeSlider.Track>
    <TimeSlider.TrackFill />
    <TimeSlider.Progress />
  </TimeSlider.Track>
  <TimeSlider.Thumb />
</TimeSlider.Root>
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
disabled
boolean
undefined
hidden
boolean
undefined
keyStep
number
5
noSwipeGesture
boolean
false
orientation
SliderOrientation
undefined
pauseWhileDragging
boolean
false
seekingRequestThrottle
number
100
shiftKeyMultiplier
number
2
step
number
0.1
import { TimeSlider, TimeSliderInstance } from "@vidstack/react"

const ref = useRef<TimeSliderInstance>(null),
  { /* state props */ } = useStore(TimeSliderInstance, ref);

<TimeSlider.Root ref={ref}>
PropTypeDefault
active
boolean
undefined
dragging
boolean
false
fillPercent
number
undefined
fillRate
number
undefined
focused
boolean
false
hidden
boolean
false
max
number
100
min
number
0
pointerPercent
number
undefined
pointerRate
number
undefined
pointerValue
number
0
pointing
boolean
false
step
number
1
value
number
0
CallbackType
onDragEnd
function
onDragStart
function
onDragValueChange
function
onMediaLiveEdgeRequest
function
onMediaPauseRequest
function
onMediaPlayRequest
function
onMediaSeekRequest
function
onMediaSeekingRequest
function
onPointerValueChange
function
onValueChange
function
import { TimeSlider, type TimeSliderInstance } from "@vidstack/react"

const ref = useRef<TimeSliderInstance>(null);

useEffect(() => { /* Use props/methods here. */ }, [])

<TimeSlider.Root ref={ref}>
PropType
state
TimeSliderState
subscribe
method
NameDescription
--slider-fill
The fill rate expressed as a percentage.
--slider-pointer
The pointer rate expressed as a percentage.
--slider-progress
The percentage of media playback that has been buffered.
/* Example. */
.component[data-foo] {}
NameDescription
data-dragging
Whether slider thumb is being dragged.
data-pointing
Whether user's pointing device is over slider.
data-active
Whether slider is being interacted with.
data-focus
Whether slider is being keyboard focused.
data-hocus
Whether slider is being keyboard focused or hovered over.
HTMLAttributes
Ref<HTMLDivElement>

Used to create predefined sections within a time slider interface based on the currently active chapters text track.

import { TimeSlider } from "@vidstack/react";

const Component = TimeSlider.Chapters;
type Props = TimeSlider.ChaptersProps;
<TimeSlider.Root>
  <TimeSlider.Chapters>
    {(cues, forwardRef) =>
      cues.map((cue) => (
        <div key={cue.startTime} ref={forwardRef}>
          <TimeSlider.Track>
            <TimeSlider.TrackFill />
            <TimeSlider.Progress />
          </TimeSlider.Track>
       </div>
    ))}
  </TimeSlider.Chapters>
</TimeSlider.Root>
PropTypeDefault
children
function
null
disabled
boolean
false
CallbackType
onChapterFill
function
onChapterProgress
function
RefAttributes
Ref<HTMLElement>

Used to display the active cue text based on the slider value and preview value.

import { TimeSlider } from "@vidstack/react";

const Component = TimeSlider.ChapterTitle;
type Props = TimeSlider.ChapterTitleProps;
<TimeSlider.Root>
  <TimeSlider.Preview>
    <TimeSlider.Chapter />
  </TimeSlider.Preview>
</TimeSlider.Root>
PropTypeDefault
asChild
boolean
false
RefAttributes
Ref<HTMLElement>

Visual element inside the slider that serves as a horizontal or vertical bar, providing a visual reference for the range of playback that has buffered/loaded.

import { TimeSlider } from "@vidstack/react";

const Component = TimeSlider.Progress;
type Props = TimeSlider.ProgressProps;
<TimeSlider.Root>
  <TimeSlider.Track>
    <TimeSlider.Progress />
  </TimeSlider.Track>
</TimeSlider.Root>
PropTypeDefault
asChild
boolean
false
HTMLAttributes<HTMLVideoElement>
Ref<HTMLVideoElement>

Used to load a low-resolution video to be displayed when the user is hovering over or dragging the time slider. The preview video will automatically be updated to be in-sync with the current preview position, so ensure it has the same length as the original media (i.e., same duration).

import { TimeSlider } from "@vidstack/react";

const Component = TimeSlider.Video;
type Props = TimeSlider.VideoProps;
<TimeSlider.Root>
  <TimeSlider.Preview>
    <TimeSlider.Video src="preview.mp4" />
  </TimeSlider.Preview>
</TimeSlider.Root>
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
crossOrigin
mixed
null
src
string
null
CallbackType
onCanPlay
function
onError
function
/* Example. */
.component[data-foo] {}
NameDescription
data-loading
Whether the video is loading.
data-error
Whether an error occurred loading video.
data-hidden
Whether the video is not ready or has failed to load.
RefAttributes
Ref<HTMLElement>

Purely visual element used to display a draggable handle to the user for adjusting the value on the slider component.

import { TimeSlider } from "@vidstack/react";

const Component = TimeSlider.Thumb;
type Props = TimeSlider.ThumbProps;
<TimeSlider.Root>
  <TimeSlider.Thumb />
</TimeSlider.Root>
PropTypeDefault
asChild
boolean
false
RefAttributes
Ref<HTMLElement>

Visual element inside the slider that serves as a horizontal or vertical bar, providing a visual reference for the range or values that can be selected by moving the slider thumb along it. Users can interact with the slider by dragging the thumb along the track to set a specific value.

import { TimeSlider } from "@vidstack/react";

const Component = TimeSlider.Track;
type Props = TimeSlider.TrackProps;
<TimeSlider.Root>
  <TimeSlider.Track>
    <TimeSlider.TrackFill />
  </TimeSlider.Track>
</TimeSlider.Root>
PropTypeDefault
asChild
boolean
false
RefAttributes
Ref<HTMLElement>

Portion of the slider track that is visually filled or highlighted to indicate the selected or currently chosen range or value. As the slider thumb is moved along the track, the track fill dynamically adjusts to visually represent the portion of the track that corresponds to the selected value or range, providing users with a clear visual indication of their selection.

import { TimeSlider } from "@vidstack/react";

const Component = TimeSlider.TrackFill;
type Props = TimeSlider.TrackFillProps;
<TimeSlider.Root>
  <TimeSlider.Track>
    <TimeSlider.TrackFill />
  </TimeSlider.Track>
</TimeSlider.Root>
PropTypeDefault
asChild
boolean
false
HTMLAttributes
Ref<HTMLElement>

Used to provide users with a real-time or interactive preview of the value or selection they are making as they move the slider thumb. This can include displaying the current pointer value numerically, or displaying a thumbnail over the time slider.

import { TimeSlider } from "@vidstack/react";

const Component = TimeSlider.Preview;
type Props = TimeSlider.PreviewProps;
<TimeSlider.Root>
  <TimeSlider.Preview>
    <TimeSlider.Value />
  </TimeSlider.Preview>
</TimeSlider.Root>
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
noClamp
boolean
false
offset
number
0
/* Example. */
.component[data-foo] {}
NameDescription
data-visible
Whether the preview is visible.
HTMLAttributes
Ref<HTMLElement>

Displays the specific numeric representation of the current or pointer value of the slider. When a user interacts with a slider by moving its thumb along the track, the slider value changes accordingly.

import { TimeSlider } from "@vidstack/react";

const Component = TimeSlider.Value;
type Props = TimeSlider.ValueProps;
<TimeSlider.Root>
  <TimeSlider.Preview>
    <TimeSlider.Value />
  </TimeSlider.Preview>
</TimeSlider.Root>
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
decimalPlaces
number
2
format
string
null
padHours
boolean
null
padMinutes
boolean
null
showHours
boolean
false
showMs
boolean
false
type
string
'pointer'
RefAttributes
Ref<HTMLElement>

Visual markers that can be used to indicate value steps on the slider track.

import { TimeSlider } from "@vidstack/react";

const Component = TimeSlider.Steps;
type Props = TimeSlider.StepsProps;
<TimeSlider.Root>
  <TimeSlider.Steps className="steps">
    {(step) => <div className="step" key={String(step)}></div>}
  </TimeSlider.Steps>
</TimeSlider.Root>
PropTypeDefault
children
function
null
asChild
boolean
false