Sliders

Time Slider

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

API Reference

Root

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> 

Props

Prop	Type	Default
`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`

State

import { TimeSlider, TimeSliderInstance } from "@vidstack/react"

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

<TimeSlider.Root ref={ref}>

Prop	Type	Default
`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`

Callbacks

Callback	Type
`onDragEnd`	`function`
`onDragStart`	`function`
`onDragValueChange`	`function`
`onMediaLiveEdgeRequest`	`function`
`onMediaPauseRequest`	`function`
`onMediaPlayRequest`	`function`
`onMediaSeekRequest`	`function`
`onMediaSeekingRequest`	`function`
`onPointerValueChange`	`function`
`onValueChange`	`function`

Instance

import { TimeSlider, type TimeSliderInstance } from "@vidstack/react"

const ref = useRef<TimeSliderInstance>(null);

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

<TimeSlider.Root ref={ref}>

Prop	Type
`state`	`TimeSliderState`
`subscribe`	`method`

CSS Variables

Name	Description
`--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.

Data Attributes

/* Example. */
.component[data-foo] {}

Name	Description
`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.

Chapters

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> 

Props

Prop	Type	Default
`children`	`function`	`null`
`disabled`	`boolean`	`false`

Callbacks

Callback	Type
`onChapterFill`	`function`
`onChapterProgress`	`function`

ChapterTitle

HTMLAttributes

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> 

Props

Prop	Type	Default
`asChild`	`boolean`	`false`

Progress

HTMLAttributes

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> 

Props

Prop	Type	Default
`asChild`	`boolean`	`false`

Video

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> 

Props

Prop	Type	Default
`asChild`	`boolean`	`false`
`children`	`ReactNode`	`null`
`crossOrigin`	`mixed`	`null`
`src`	`string`	`null`

Callbacks

Callback	Type
`onCanPlay`	`function`
`onError`	`function`

Data Attributes

/* Example. */
.component[data-foo] {}

Name	Description
`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.

Thumb

HTMLAttributes

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> 

Props

Prop	Type	Default
`asChild`	`boolean`	`false`

Track

HTMLAttributes

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> 

Props

Prop	Type	Default
`asChild`	`boolean`	`false`

TrackFill

HTMLAttributes

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> 

Props

Prop	Type	Default
`asChild`	`boolean`	`false`

Preview

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> 

Props

Prop	Type	Default
`asChild`	`boolean`	`false`
`children`	`ReactNode`	`null`
`noClamp`	`boolean`	`false`
`offset`	`number`	`0`

Data Attributes

/* Example. */
.component[data-foo] {}

Name	Description
`data-visible`	Whether the preview is visible.

Value

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> 

Props

Prop	Type	Default
`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'`

Steps

HTMLAttributes

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> 

Props

Prop	Type	Default
`children`	`function`	`null`
`asChild`	`boolean`	`false`

Time Slider

API Reference

Root

Props

asChild

children

disabled

hidden

keyStep

noSwipeGesture

orientation

pauseWhileDragging

seekingRequestThrottle

shiftKeyMultiplier

step

State

active

dragging

fillPercent

fillRate

focused

hidden

max

min

pointerPercent

pointerRate

pointerValue

pointing

step

value

Callbacks

onDragEnd

onDragStart

onDragValueChange

onMediaLiveEdgeRequest

onMediaPauseRequest

onMediaPlayRequest

onMediaSeekRequest

onMediaSeekingRequest

onPointerValueChange

onValueChange

Instance

state

subscribe

CSS Variables

--slider-fill

--slider-pointer

--slider-progress

Data Attributes

data-dragging

data-pointing

data-active

data-focus

data-hocus

Chapters

Props

children

disabled

Callbacks

onChapterFill

onChapterProgress

ChapterTitle

Props

asChild

Progress

Props

asChild

Video

Props

asChild

children

crossOrigin

src

Callbacks

onCanPlay

onError

Data Attributes

data-loading

data-error

data-hidden

`asChild`

`children`

`disabled`

`hidden`

`keyStep`

`noSwipeGesture`

`orientation`

`pauseWhileDragging`

`seekingRequestThrottle`

`shiftKeyMultiplier`

`step`

`active`

`dragging`

`fillPercent`

`fillRate`

`focused`

`hidden`

`max`

`min`

`pointerPercent`

`pointerRate`

`pointerValue`

`pointing`

`step`

`value`

`onDragEnd`

`onDragStart`

`onDragValueChange`

`onMediaLiveEdgeRequest`

`onMediaPauseRequest`

`onMediaPlayRequest`

`onMediaSeekRequest`

`onMediaSeekingRequest`

`onPointerValueChange`

`onValueChange`

`state`

`subscribe`

`--slider-fill`

`--slider-pointer`

`--slider-progress`

`data-dragging`

`data-pointing`

`data-active`

`data-focus`

`data-hocus`

`children`

`disabled`

`onChapterFill`

`onChapterProgress`

`asChild`

`asChild`

`asChild`

`children`

`crossOrigin`

`src`

`onCanPlay`

`onError`

`data-loading`

`data-error`

`data-hidden`

`asChild`

`asChild`

`asChild`

`asChild`

`children`

`noClamp`

`offset`

`data-visible`

`asChild`

`children`

`decimalPlaces`

`format`

`padHours`

`padMinutes`

`showHours`

`showMs`

`type`

`children`

`asChild`