Skip to content
FrameworkStyle

Slider

A composable slider component with track, fill, thumb, preview, and value parts

Anatomy 

<Slider.Root>
  <Slider.Track>
    <Slider.Fill />
  </Slider.Track>
  <Slider.Thumb />
  <Slider.Preview>
    <Slider.Value type="pointer" />
  </Slider.Preview>
</Slider.Root>

Behavior

The base Slider provides a generic range input. It manages value, pointer tracking, and drag interactions. Domain-specific sliders like TimeSlider and VolumeSlider extend this with media-specific bindings.

The slider supports vertical orientation via the orientation prop (defaults to "horizontal").

Styling

Use CSS custom properties to position fill, thumb, and preview elements:

React renders standard DOM elements. Add a className to style them: 

.slider-fill {
  width: var(--media-slider-fill);
}

.slider-thumb {
  left: var(--media-slider-fill);
}

Style based on interaction state: 

.slider[data-interactive] .slider-track {
  height: 6px;
}
.slider[data-pointing] .slider-preview {
  opacity: 1;
}

Accessibility

Renders with role="slider" and automatic ARIA attributes (aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext). Override the label with the label prop. Keyboard controls:

  • Arrow Left / Arrow Right: step by step increment
  • Page Up / Page Down: step by largeStep increment
  • Home: jump to minimum
  • End: jump to maximum

Examples

Basic

A slider with track, fill, and thumb. 

import { Slider } from '@videojs/react';
import { useState } from 'react';

export default function BasicUsage() {
  const [value, setValue] = useState(50);

  return (
    <div className="demo">
      <Slider.Root className="media-slider" value={value} onValueChange={setValue}>
        <Slider.Track className="media-slider-track">
          <Slider.Fill className="media-slider-fill" />
        </Slider.Track>
        <Slider.Thumb className="media-slider-thumb" />
      </Slider.Root>
    </div>
  );
}

With Preview

A slider with a pointer-tracking preview that displays the value at the current pointer position.

0
 
import { Slider } from '@videojs/react';
import { useState } from 'react';

export default function WithPreview() {
  const [value, setValue] = useState(50);

  return (
    <div className="demo">
      <Slider.Root className="media-slider" value={value} onValueChange={setValue}>
        <Slider.Track className="media-slider-track">
          <Slider.Fill className="media-slider-fill" />
        </Slider.Track>
        <Slider.Thumb className="media-slider-thumb" />
        <Slider.Preview className="preview">
          <Slider.Value type="pointer" className="media-slider-value" />
        </Slider.Preview>
      </Slider.Root>
    </div>
  );
}

API Reference

Root

Props

Prop Type Default Details
disabled boolean false
label string | function ''
largeStep number 10
max number 100
min number 0
orientation 'horizontal' | 'vertical' 'horizontal'
step number 1
thumbAlignment 'center' | 'edge' 'center'
value number 0

State

State is accessible via the render, className, and style props.

Property Type Details
value number
fillPercent number
pointerPercent number
dragging boolean
pointing boolean
interactive boolean
orientation 'horizontal' | 'vertical'
disabled boolean
thumbAlignment 'center' | 'edge'

Data attributes

Attribute Type Details
data-dragging
data-pointing
data-interactive
data-orientation 'horizontal' | 'vertical'
data-disabled

CSS custom properties

Variable Details
--media-slider-fill
--media-slider-pointer
--media-slider-buffer

Buffer

Displays the buffered range on the slider track.

Fill

Displays the filled portion from start to the current value.

Preview

Positioning container for preview content that tracks the pointer along the slider.

Props

Prop Type Default Details
overflow SliderPreviewOverflow —

Data attributes

Attribute Type Details
data-dragging
data-pointing
data-interactive
data-orientation 'horizontal' | 'vertical'
data-disabled

Thumb

Draggable handle for setting the slider value. Receives focus and handles keyboard interaction.

Data attributes

Attribute Type Details
data-dragging
data-pointing
data-interactive
data-orientation 'horizontal' | 'vertical'
data-disabled

Thumbnail

Track

Contains the slider's visual track and interactive hit zone.

Value

Displays a formatted text representation of the slider value. Renders an <output> element.

Props

Prop Type Default Details
format ((value: number) => string) —
type "current" | "pointer" —

Data attributes

Attribute Type Details
data-dragging
data-pointing
data-interactive
data-orientation 'horizontal' | 'vertical'
data-disabled