Skip to main content
Slider is a generic range input primitive. It manages value, pointer tracking, and drag interactions. Domain-specific sliders like TimeSlider and VolumeSlider extend this with media-specific bindings.

​
Sub-components

ComponentDescription
Slider.RootRoot slider container. Manages value, drag, and keyboard state.
Slider.TrackVisual track bar that receives click-to-seek.
Slider.FillFill bar that represents the current value.
Slider.BufferBuffer bar that represents buffered amount (used in TimeSlider).
Slider.ThumbDraggable thumb handle.
Slider.PreviewContainer for pointer-position-anchored previews.
Slider.ValueDisplays a formatted value at the current or pointer position.
Slider.ThumbnailDisplays a thumbnail image inside a preview at the pointer position.

​
Import

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

​
Basic Usage

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

function CustomSlider({ value, onChange }: { value: number; onChange: (v: number) => void }) {
  return (
    <Slider.Root
      value={value}
      min={0}
      max={100}
      step={1}
      onValueChange={onChange}
      className="slider"
    >
      <Slider.Track className="slider-track">
        <Slider.Fill className="slider-fill" />
      </Slider.Track>
      <Slider.Thumb className="slider-thumb" />
    </Slider.Root>
  );
}

​
With Preview

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

function SliderWithPreview({ value, onChange }: { value: number; onChange: (v: number) => void }) {
  return (
    <Slider.Root
      value={value}
      min={0}
      max={100}
      onValueChange={onChange}
      className="slider"
    >
      <Slider.Track className="slider-track">
        <Slider.Fill className="slider-fill" />
      </Slider.Track>
      <Slider.Thumb className="slider-thumb" />
      <Slider.Preview className="slider-preview">
        <Slider.Value type="pointer" className="slider-value" />
      </Slider.Preview>
    </Slider.Root>
  );
}

​
Slider.Root Props

​
value
number
Current slider value. The slider is uncontrolled when omitted. Defaults to 0.
​
min
number
Minimum allowed value. Defaults to 0.
​
max
number
Maximum allowed value. Defaults to 100.
​
step
number
Step size for arrow key navigation. Defaults to 1.
​
largeStep
number
Large step size for Page Up / Page Down key navigation. Defaults to 10.
​
orientation
"horizontal" | "vertical"
Slider orientation. Defaults to "horizontal".
​
disabled
boolean
Disables the slider.
​
thumbAlignment
string
Controls how the thumb aligns relative to the track edges at min/max positions.
​
label
string
aria-label for the slider. Announced by screen readers.
​
onValueChange
(value: number) => void
Called continuously as the value changes during drag.
​
onValueCommit
(value: number) => void
Called once when the user commits a value (on drag end or keyboard interaction).
​
onDragStart
() => void
Called when the user begins dragging the thumb.
​
onDragEnd
() => void
Called when the user releases the thumb after dragging.
​
className
string | ((state: SliderRoot.State) => string)
CSS class name or a function that receives state and returns a class name.
​
style
CSSProperties | ((state: SliderRoot.State) => CSSProperties)
Inline style or a function that receives state and returns a style object.
​
render
ReactElement | ((props: HTMLProps, state: SliderRoot.State) => ReactElement | null)
Custom render prop for the root element.

​
Slider.Value Props

​
type
"current" | "pointer"
required
Which value to display. "current" shows the committed value; "pointer" shows the value at the current pointer position (for hover previews).

​
State Data Attributes

These attributes are reflected on Slider.Root.
AttributeValue / Description
data-pointingPresent while the pointer is hovering over the slider.
data-interactivePresent when the user is interacting (pointing or dragging).
data-draggingPresent while the thumb is being dragged.
data-orientation"horizontal" | "vertical" — reflects the orientation prop.

​
CSS Custom Properties

PropertyDescription
--media-slider-fillCurrent fill percentage (0–100). Use to position fill and thumb elements.
--media-slider-pointerPointer position percentage (0–100). Use to position preview elements.

​
CSS Styling Example

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

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

/* Expand track on interaction */
.slider[data-interactive] .slider-track {
  height: 6px;
}

/* Show preview on hover */
.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
  • Page Up / Page Down: step by largeStep
  • Home: jump to minimum
  • End: jump to maximum

Build docs developers (and LLMs) love

Get started for freeTalk to us