1. UI
  2. Slider

UI

Slider

This component is used to create an input for controlling a range of values (e.g., media volume or time).

Import

tsx
        import { Slider } from '@vidstack/player-react';

      

Usage

The <Slider> component is a custom-built range input (input[type="range"]) that is cross-browser friendly, ARIA friendly, mouse/touch-friendly and easily style-able. The slider allows users to input numeric values between a minimum and maximum value.

Other sliders in the library such as <TimeSlider> and <VolumeSlider> extend the <Slider> component with additional functionality based on their use-case. All documentation on this page, particularly around styling, is perfectly valid for building out any slider.

          
        

Styling

Attributes

The attributes listed in the table below are applied to a slider element when valid. You can use the presence, or absence of these attributes to style the slider and any of it's children as desired. See the example below.

AttributeDescription
draggingSlider thumb is currently being dragged.
pointingDevice pointer (mouse/touch) is within slider bounds.
interactiveEither dragging or pointing is true.
        <vds-slider dragging interactive />

      

CSS Variables

The CSS variables listed in the table below can be used to style your own slider. The fill variables represent the current value, and the pointer variables represent the current value at the device pointer (mouse/thumb).

VariableDescription
--vds-fill-valueSlider fill amount (e.g., 30).
--vds-fill-rateThe fill value expressed as a ratio (e.g., 0.3).
--vds-fill-percentThe fill rate expressed as a percentage (e.g., 30%).
--vds-pointer-valueFill amount up to the device pointer (e.g., 30).
--vds-pointer-rateThe pointer value expressed as a ratio (e.g., 0.3).
--vds-pointer-percentThe pointer rate expressed as a percentage. (e.g., 30%).

Example

The following example showcases how to build a conventional-looking slider with a track and thumb:

          
        
TIP

You can take this example even further by reading through the <vds-slider-value-text>, and <vds-slider-video> docs when you're ready.

Tailwind

The following section is for Tailwind CSS users who have installed our Tailwind Plugin.

Variants

All the attributes listed above are exposed as variants:

        <div class="pointing:bg-indigo-300 dragging:bg-indigo-500" />

      

CSS Variables

You can take advantage of arbitrary values if you're using Tailwind CSS v3+ and use the CSS variables listed above.

        <div class="left-[var(--vds-fill-percent)]" />

      

Example

The following example showcases a slider with a thumb inside positioned at the current value (indicated by the --vds-fill-percent variable). When the device pointer enters the slider, or the thumb begins to be dragged (indicated by the interactive variant), we pin the thumb to the device pointer position.