This component is used to create an input for controlling a range of values (e.g., media volume or time).
<script type="module" src="https://cdn.jsdelivr.net/npm/@vidstack/player@next/cdn/define/vds-slider.js" ></script>
<vds-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
<vds-volume-slider> extend the
<vds-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.
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.
|Slider thumb is currently being dragged.|
|Device pointer (mouse/touch) is within slider bounds.|
|Either dragging or pointing is true.|
<vds-slider dragging interactive />
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).
|Slider fill amount (e.g., |
|The fill value expressed as a ratio (e.g., |
|The fill rate expressed as a percentage (e.g., |
|Fill amount up to the device pointer (e.g., |
|The pointer value expressed as a ratio (e.g., |
|The pointer rate expressed as a percentage. (e.g., |
The following example showcases how to build a conventional-looking slider with a track and thumb:
The following section is for Tailwind CSS users who have installed our Tailwind Plugin.
All the attributes listed above are exposed as variants:
<div class="pointing:bg-indigo-300 dragging:bg-indigo-500" />
<div class="left-[var(--vds-fill-percent)]" />
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.