Slider

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

Import

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

Anatomy

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

<media-slider>
  <media-slider-track>
    <media-slider-fill></media-slider-fill>
  </media-slider-track>
  <media-slider-thumb></media-slider-thumb>
  <media-slider-preview>
    <media-slider-value type="pointer"></media-slider-value>
  </media-slider-preview>
</media-slider>

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. TimeSlider also provides parts for rendering chapter ranges and the chapter at the current interaction position.

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>
  );
}

.demo {
  display: flex;
  align-items: center;
  padding: 24px;
  background: #1a1a1a;
}

.media-slider {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 20px;
  cursor: pointer;
}

.media-slider-track {
  position: absolute;
  right: 0;
  left: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  transition: height 150ms ease;
}

.media-slider[data-interactive] .media-slider-track {
  height: 6px;
}

.media-slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--media-slider-fill);
  height: 100%;
  background: white;
  border-radius: 9999px;
}

.media-slider-thumb {
  position: absolute;
  left: var(--media-slider-fill);
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%) scale(0);
  transition: transform 150ms ease;
}

.media-slider[data-interactive] .media-slider-thumb {
  transform: translateX(-50%) scale(1);
}

.media-slider[data-dragging] .media-slider-thumb {
  transform: translateX(-50%) scale(1.1);
}

<div class="demo">
  <media-slider class="media-slider" value="50">
    <media-slider-track class="media-slider-track">
      <media-slider-fill class="media-slider-fill"></media-slider-fill>
    </media-slider-track>
    <media-slider-thumb class="media-slider-thumb"></media-slider-thumb>
  </media-slider>
</div>

.demo {
  display: flex;
  align-items: center;
  padding: 24px;
  background: #1a1a1a;
}

.media-slider {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 20px;
  cursor: pointer;
}

.media-slider-track {
  position: absolute;
  right: 0;
  left: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  transition: height 150ms ease;
}

.media-slider[data-interactive] .media-slider-track {
  height: 6px;
}

.media-slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--media-slider-fill);
  height: 100%;
  background: white;
  border-radius: 9999px;
}

.media-slider-thumb {
  position: absolute;
  left: var(--media-slider-fill);
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%) scale(0);
  transition: transform 150ms ease;
}

.media-slider[data-interactive] .media-slider-thumb {
  transform: translateX(-50%) scale(1);
}

.media-slider[data-dragging] .media-slider-thumb {
  transform: translateX(-50%) scale(1.1);
}

import '@videojs/html/ui/slider';

With Preview

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

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>
  );
}

.demo {
  display: flex;
  align-items: center;
  padding: 40px 24px;
  background: #1a1a1a;
}

.media-slider {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 20px;
  cursor: pointer;
}

.media-slider-track {
  position: absolute;
  right: 0;
  left: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  transition: height 150ms ease;
}

.media-slider[data-interactive] .media-slider-track {
  height: 6px;
}

.media-slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--media-slider-fill);
  height: 100%;
  background: white;
  border-radius: 9999px;
}

.media-slider-thumb {
  position: absolute;
  left: var(--media-slider-fill);
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%) scale(0);
  transition: transform 150ms ease;
}

.media-slider[data-interactive] .media-slider-thumb {
  transform: translateX(-50%) scale(1);
}

.media-slider[data-dragging] .media-slider-thumb {
  transform: translateX(-50%) scale(1.1);
}

.preview {
  position: absolute;
  bottom: 100%;
  margin-bottom: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}

.media-slider[data-pointing] .preview {
  opacity: 1;
}

.media-slider-value {
  padding: 2px 6px;
  font-size: 12px;
  color: white;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
}

<div class="demo">
  <media-slider class="media-slider" value="50">
    <media-slider-track class="media-slider-track">
      <media-slider-fill class="media-slider-fill"></media-slider-fill>
    </media-slider-track>
    <media-slider-thumb class="media-slider-thumb"></media-slider-thumb>
    <media-slider-preview class="preview">
      <media-slider-value type="pointer" class="media-slider-value"></media-slider-value>
    </media-slider-preview>
  </media-slider>
</div>

.demo {
  display: flex;
  align-items: center;
  padding: 40px 24px;
  background: #1a1a1a;
}

.media-slider {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 20px;
  cursor: pointer;
}

.media-slider-track {
  position: absolute;
  right: 0;
  left: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  transition: height 150ms ease;
}

.media-slider[data-interactive] .media-slider-track {
  height: 6px;
}

.media-slider-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--media-slider-fill);
  height: 100%;
  background: white;
  border-radius: 9999px;
}

.media-slider-thumb {
  position: absolute;
  left: var(--media-slider-fill);
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%) scale(0);
  transition: transform 150ms ease;
}

.media-slider[data-interactive] .media-slider-thumb {
  transform: translateX(-50%) scale(1);
}

.media-slider[data-dragging] .media-slider-thumb {
  transform: translateX(-50%) scale(1.1);
}

.preview {
  position: absolute;
  bottom: 100%;
  margin-bottom: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}

.media-slider[data-pointing] .preview {
  opacity: 1;
}

.media-slider-value {
  padding: 2px 6px;
  font-size: 12px;
  color: white;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
}

import '@videojs/html/ui/slider';

API Reference

Root

Props

Prop	Type	Default
`disabled`	`boolean`	`false`
Description Whether the slider is non-interactive.
`label`	`object`	`''`
Description Custom label for the slider. Type `{ key: string; text: string } \| string \| ((state: SliderState) => Text \| string)`
`largeStep`	`number`	`10`
Description Large step increment (Page Up/Down keys).
`max`	`number`	`100`
Description Maximum value of the slider range.
`min`	`number`	`0`
Description Minimum value of the slider range.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`
Description Axis of slider movement.
`step`	`number`	`1`
Description Step increment for value changes (arrow keys).
`thumbAlignment`	`'center' \| 'edge'`	`'center'`
Description How the thumb aligns at the track edges. `edge` constrains the thumb within track bounds.
`value`	`number`	`0`
Description Current slider value.

State

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

Property	Type	Details
`value`	`number`
Description Current slider value in the min–max range.
`fillPercent`	`number`
Description Fill level as a percentage (0–100), derived from value.
`pointerPercent`	`number`
Description Pointer position as a percentage of the track (0–100).
`dragging`	`boolean`
Description Whether the user is actively dragging.
`pointing`	`boolean`
Description Whether the pointer is over the slider.
`interactive`	`boolean`
Description Whether dragging, pointing, or focus is active.
`orientation`	`'horizontal' \| 'vertical'`
Description Axis of slider movement.
`disabled`	`boolean`
Description Whether the slider is non-interactive.
`thumbAlignment`	`'center' \| 'edge'`
Description How the thumb aligns at the track edges.

Data attributes

Attribute	Type	Details
`data-dragging`
Description Present when the user is actively dragging.
`data-pointing`
Description Present when the pointer is over the slider.
`data-interactive`
Description Present when dragging, pointing, or focus is active.
`data-orientation`	`'horizontal' \| 'vertical'`
Description Current axis of slider movement (`horizontal` or `vertical`).
`data-disabled`
Description Present when the slider is non-interactive.

CSS custom properties

Variable	Details
`--media-slider-fill`
Description Fill level percentage (0–100).
`--media-slider-pointer`
Description Pointer position percentage (0–100).
`--media-slider-buffer`
Description Buffer level percentage (0–100).

Events

Event	Description
`drag-end`	Fired when a pointer drag ends.
`drag-start`	Fired when a pointer drag starts.
`value-change`	Fired while the slider value changes during an interaction.
`value-commit`	Fired when an interaction commits the slider value.

Buffer

Displays the buffered range on the slider track.

Props

Prop	Type	Default
`className`	`string \| ((state: SliderState) => string \| undefined)`	`—`
Description Class name or function returning class name from state.
`render`	`ReactElement \| ((props: HTMLProps, state: SliderState) => ReactElement \| null)`	`—`
Description Render prop for custom element.
`style`	`CSSProperties \| ((state: SliderState) => CSSProperties \| undefined)`	`—`
Description Style or function returning style from state.

Fill

Displays the filled portion from start to the current value.

Props

Prop	Type	Default
`className`	`string \| ((state: SliderState) => string \| undefined)`	`—`
Description Class name or function returning class name from state.
`render`	`ReactElement \| ((props: HTMLProps, state: SliderState) => ReactElement \| null)`	`—`
Description Render prop for custom element.
`style`	`CSSProperties \| ((state: SliderState) => CSSProperties \| undefined)`	`—`
Description Style or function returning style from state.

Preview

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

Props

Prop	Type	Default
`className`	`string \| ((state: SliderState) => string \| undefined)`	`—`
Description Class name or function returning class name from state.
`render`	`ReactElement \| ((props: HTMLProps, state: SliderState) => ReactElement \| null)`	`—`
Description Render prop for custom element.
`style`	`CSSProperties \| ((state: SliderState) => CSSProperties \| undefined)`	`—`
Description Style or function returning style from state.

Data attributes

Attribute	Type	Details
`data-dragging`
Description Present when the user is actively dragging.
`data-pointing`
Description Present when the pointer is over the slider.
`data-interactive`
Description Present when dragging, pointing, or focus is active.
`data-orientation`	`'horizontal' \| 'vertical'`
Description Current axis of slider movement (`horizontal` or `vertical`).
`data-disabled`
Description Present when the slider is non-interactive.

Thumb

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

Props

Prop	Type	Default
`className`	`string \| ((state: SliderState) => string \| undefined)`	`—`
Description Class name or function returning class name from state.
`render`	`ReactElement \| ((props: HTMLProps, state: SliderState) => ReactElement \| null)`	`—`
Description Render prop for custom element.
`style`	`CSSProperties \| ((state: SliderState) => CSSProperties \| undefined)`	`—`
Description Style or function returning style from state.

Data attributes

Attribute	Type	Details
`data-dragging`
Description Present when the user is actively dragging.
`data-pointing`
Description Present when the pointer is over the slider.
`data-interactive`
Description Present when dragging, pointing, or focus is active.
`data-orientation`	`'horizontal' \| 'vertical'`
Description Current axis of slider movement (`horizontal` or `vertical`).
`data-disabled`
Description Present when the slider is non-interactive.

Thumbnail

Props

Prop	Type	Default
`className`	`string \| ((state: ThumbnailCore.State) => string \| undefined)`	`—`
Description Class name or function returning class name from state.
`render`	`ReactElement \| ((props: HTMLProps, state: ThumbnailCore.State) => ReactElement \| null)`	`—`
Description Render prop for custom element.
`style`	`CSSProperties \| ((state: ThumbnailCore.State) => CSSProperties \| undefined)`	`—`
Description Style or function returning style from state.
`thumbnails`	`ThumbnailImage[]`	`—`
Description Pre-parsed thumbnail images — bypasses the automatic `<track>` detection.

Track

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

Props

Prop	Type	Default
`className`	`string \| ((state: SliderState) => string \| undefined)`	`—`
Description Class name or function returning class name from state.
`render`	`ReactElement \| ((props: HTMLProps, state: SliderState) => ReactElement \| null)`	`—`
Description Render prop for custom element.
`style`	`CSSProperties \| ((state: SliderState) => CSSProperties \| undefined)`	`—`
Description Style or function returning style from state.

Value

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

Props

Prop	Type	Default
`className`	`string \| ((state: SliderState) => string \| undefined)`	`—`
Description Class name or function returning class name from state.
`format`	`((value: number) => string)`	`—`
Description Custom formatter for the displayed value. Overrides the root's `formatValue`.
`render`	`ReactElement \| ((props: HTMLProps, state: SliderState) => ReactElement \| null)`	`—`
Description Render prop for custom element.
`style`	`CSSProperties \| ((state: SliderState) => CSSProperties \| undefined)`	`—`
Description Style or function returning style from state.
`type`	`'current' \| 'pointer'`	`—`
Description Which slider value to display: the current position or the pointer position.

Data attributes

Attribute	Type	Details
`data-dragging`
Description Present when the user is actively dragging.
`data-pointing`
Description Present when the pointer is over the slider.
`data-interactive`
Description Present when dragging, pointing, or focus is active.
`data-orientation`	`'horizontal' \| 'vertical'`
Description Current axis of slider movement (`horizontal` or `vertical`).
`data-disabled`
Description Present when the slider is non-interactive.

Import

Anatomy

Behavior

Styling

Accessibility

Examples

Basic

With Preview

API Reference

Rootmedia-slider

Props

State

Data attributes

CSS custom properties

Events

Buffermedia-slider-buffer

Props

Fillmedia-slider-fill

Props

Previewmedia-slider-preview

Props

Data attributes

Thumbmedia-slider-thumb

Props

Data attributes

Thumbnailmedia-slider-thumbnail

Props

Trackmedia-slider-track

Props

Valuemedia-slider-value

Props

Data attributes

Root

Buffer

Fill

Preview

Thumb

Thumbnail

Track

Value