Looking for the old docs? Go here

Sliders

Volume Slider

This component is used to create a range input for controlling the volume of media.

API Reference

Section titled API Reference

Root

Section titled Root
HTMLAttributes
Ref<VolumeSliderInstance>

Versatile and user-friendly input volume 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 volume level within the range 0 (muted) to 100.

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

const Component = VolumeSlider.Root;
type Props = VolumeSlider.RootProps;
import { VolumeSlider } from "@vidstack/react";

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

Props

Section titled Props
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
disabled
boolean
undefined
keyStep
number
5
orientation
SliderOrientation
undefined
shiftKeyMultiplier
number
2
step
number
undefined

State

Section titled State
import { VolumeSlider, VolumeSliderInstance } from "@vidstack/react"

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

<VolumeSlider.Root ref={ref}>
import { VolumeSlider, VolumeSliderInstance } from "@vidstack/react"

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

<VolumeSlider.Root ref={ref}>
PropTypeDefault
active
boolean
undefined
dragging
boolean
false
fillPercent
number
undefined
fillRate
number
undefined
focused
boolean
false
max
number
100
min
number
0
pointerPercent
number
undefined
pointerRate
number
undefined
pointerValue
number
0
pointing
boolean
false
value
number
0

Callbacks

Section titled Callbacks
CallbackType
onDragEnd
function
onDragStart
function
onDragValueChange
function
onPointerValueChange
function
onValueChange
function

Instance

Section titled Instance
import { VolumeSlider, type VolumeSliderInstance } from "@vidstack/react"

const ref = useRef<VolumeSliderInstance>(null);

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

<VolumeSlider.Root ref={ref}>
import { VolumeSlider, type VolumeSliderInstance } from "@vidstack/react"

const ref = useRef<VolumeSliderInstance>(null);

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

<VolumeSlider.Root ref={ref}>
PropType
state
SliderState
subscribe
method

CSS Variables

Section titled CSS Variables
NameDescription
--slider-fill
The fill rate expressed as a percentage.
--slider-pointer
The pointer rate expressed as a percentage.

Data Attributes

Section titled Data Attributes
NameDescription
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.
data-supported
Whether volume control is supported.

Value

Section titled Value
HTMLAttributes
Ref<HTMLElement>

Displays the specific numeric representation of the current or pointer value of the volume slider. When a user interacts with a slider by moving its thumb along the track, the slider value and volume updates accordingly.

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

const Component = VolumeSlider.Value;
type Props = VolumeSlider.ValueProps;
import { VolumeSlider } from "@vidstack/react";

const Component = VolumeSlider.Value;
type Props = VolumeSlider.ValueProps;
<VolumeSlider.Root>
  <VolumeSlider.Preview>
    <VolumeSlider.Value />
  </VolumeSlider.Preview>
</VolumeSlider.Root>
<VolumeSlider.Root>
  <VolumeSlider.Preview>
    <VolumeSlider.Value />
  </VolumeSlider.Preview>
</VolumeSlider.Root>

Props

Section titled Props
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
decimalPlaces
number
2
format
string
null
padHours
boolean
null
padMinutes
boolean
null
showHours
boolean
false
type
string
'pointer'

Thumb

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

const Component = VolumeSlider.Thumb;
type Props = VolumeSlider.ThumbProps;
import { VolumeSlider } from "@vidstack/react";

const Component = VolumeSlider.Thumb;
type Props = VolumeSlider.ThumbProps;
<Slider.Root>
  <Slider.Thumb />
</Slider.Root>
<Slider.Root>
  <Slider.Thumb />
</Slider.Root>

Props

Section titled Props
PropTypeDefault
asChild
boolean
false

Track

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

const Component = VolumeSlider.Track;
type Props = VolumeSlider.TrackProps;
import { VolumeSlider } from "@vidstack/react";

const Component = VolumeSlider.Track;
type Props = VolumeSlider.TrackProps;
<Slider.Root>
  <Slider.Track>
    <Slider.TrackFill />
  </Slider.Track>
</Slider.Root>
<Slider.Root>
  <Slider.Track>
    <Slider.TrackFill />
  </Slider.Track>
</Slider.Root>

Props

Section titled Props
PropTypeDefault
asChild
boolean
false

TrackFill

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

const Component = VolumeSlider.TrackFill;
type Props = VolumeSlider.TrackFillProps;
import { VolumeSlider } from "@vidstack/react";

const Component = VolumeSlider.TrackFill;
type Props = VolumeSlider.TrackFillProps;
<Slider.Root>
  <Slider.Track>
    <Slider.TrackFill />
  </Slider.Track>
</Slider.Root>
<Slider.Root>
  <Slider.Track>
    <Slider.TrackFill />
  </Slider.Track>
</Slider.Root>

Props

Section titled Props
PropTypeDefault
asChild
boolean
false

Preview

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

const Component = VolumeSlider.Preview;
type Props = VolumeSlider.PreviewProps;
import { VolumeSlider } from "@vidstack/react";

const Component = VolumeSlider.Preview;
type Props = VolumeSlider.PreviewProps;
<Slider.Root>
  <Slider.Preview>
    <Slider.Value />
  </Slider.Preview>
</Slider.Root>
<Slider.Root>
  <Slider.Preview>
    <Slider.Value />
  </Slider.Preview>
</Slider.Root>

Props

Section titled Props
PropTypeDefault
asChild
boolean
false
children
ReactNode
null
noClamp
boolean
false
offset
number
0

Data Attributes

Section titled Data Attributes
NameDescription
data-visible
Whether the preview is visible.
Previous
Slider
Next
Time Slider