Sliders

Slider

This component is used to create an input for controlling a range of values.

API Reference

Root

HTMLAttributes

Ref<SliderInstance>

Versatile and user-friendly input control designed for seamless cross-browser 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 input numeric values within a specified range, defined by a minimum and maximum value.

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

const Component = Slider.Root;
type Props = Slider.RootProps; <Slider.Root>
  <Slider.Track>
    <Slider.TrackFill />
  </Slider.Track>
  <Slider.Thumb />
</Slider.Root> 

Props

Prop	Type	Default
`asChild`	`boolean`	`false`
`children`	`ReactNode`	`null`
`disabled`	`boolean`	`undefined`
`hidden`	`boolean`	`undefined`
`keyStep`	`number`	`undefined`
`max`	`number`	`100`
`min`	`number`	`0`
`orientation`	`SliderOrientation`	`undefined`
`shiftKeyMultiplier`	`number`	`undefined`
`step`	`number`	`undefined`
`value`	`number`	`0`

State

import { Slider, SliderInstance } from "@vidstack/react"

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

<Slider.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`
`onPointerValueChange`	`function`
`onValueChange`	`function`

Instance

import { Slider, type SliderInstance } from "@vidstack/react"

const ref = useRef<SliderInstance>(null);

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

<Slider.Root ref={ref}>

Prop	Type
`state`	`SliderState`
`subscribe`	`method`

CSS Variables

Name	Description
`--slider-fill`	The fill rate expressed as a percentage.
`--slider-pointer`	The pointer rate expressed as a percentage.

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.

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 { Slider } from "@vidstack/react";

const Component = Slider.Thumb;
type Props = Slider.ThumbProps; <Slider.Root>
  <Slider.Thumb />
</Slider.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 { Slider } from "@vidstack/react";

const Component = Slider.Track;
type Props = Slider.TrackProps; <Slider.Root>
  <Slider.Track>
    <Slider.TrackFill />
  </Slider.Track>
</Slider.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 { Slider } from "@vidstack/react";

const Component = Slider.TrackFill;
type Props = Slider.TrackFillProps; <Slider.Root>
  <Slider.Track>
    <Slider.TrackFill />
  </Slider.Track>
</Slider.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 { Slider } from "@vidstack/react";

const Component = Slider.Preview;
type Props = Slider.PreviewProps; <Slider.Root>
  <Slider.Preview>
    <Slider.Value />
  </Slider.Preview>
</Slider.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 { Slider } from "@vidstack/react";

const Component = Slider.Value;
type Props = Slider.ValueProps; <Slider.Root>
  <Slider.Preview>
    <Slider.Value />
  </Slider.Preview>
</Slider.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 { Slider } from "@vidstack/react";

const Component = Slider.Steps;
type Props = Slider.StepsProps; <Slider.Root>
  <Slider.Steps className="steps">
    {(step) => <div className="step" key={String(step)}></div>}
  </Slider.Steps>
</Slider.Root> 

Props

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

Slider

API Reference

Root

Props

asChild

children

disabled

hidden

keyStep

max

min

orientation

shiftKeyMultiplier

step

value

State

active

dragging

fillPercent

fillRate

focused

hidden

max

min

pointerPercent

pointerRate

pointerValue

pointing

step

value

Callbacks

onDragEnd

onDragStart

onDragValueChange

onPointerValueChange

onValueChange

Instance

state

subscribe

CSS Variables

--slider-fill

--slider-pointer

Data Attributes

data-dragging

data-pointing

data-active

data-focus

data-hocus

Thumb

Props

asChild

Track

Props

asChild

TrackFill

Props

asChild

Preview

Props

asChild

children

noClamp

offset

Data Attributes

data-visible

Value

Props

asChild

children

decimalPlaces

format

padHours

padMinutes

showHours

showMs

type

Steps

Props

children

asChild

`asChild`

`children`

`disabled`

`hidden`

`keyStep`

`max`

`min`

`orientation`

`shiftKeyMultiplier`

`step`

`value`

`active`

`dragging`

`fillPercent`

`fillRate`

`focused`

`hidden`

`max`

`min`

`pointerPercent`

`pointerRate`

`pointerValue`

`pointing`

`step`

`value`

`onDragEnd`

`onDragStart`

`onDragValueChange`

`onPointerValueChange`

`onValueChange`

`state`

`subscribe`

`--slider-fill`

`--slider-pointer`

`data-dragging`

`data-pointing`

`data-active`

`data-focus`

`data-hocus`

`asChild`

`asChild`

`asChild`

`asChild`

`children`

`noClamp`

`offset`

`data-visible`

`asChild`

`children`

`decimalPlaces`

`format`

`padHours`

`padMinutes`

`showHours`

`showMs`

`type`

`children`

`asChild`