UI
Volume Slider API
This component is used to create a range input for controlling the volume of media.
# Import
js
import '@vidstack/player/define/vds-volume-slider.js';
cdn
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@vidstack/player@next/cdn/define/vds-volume-slider.js"
></script>
# Properties
Attribute:
disabled
Type:
boolean
Whether the slider should be disabled (non-interactive).
Attribute:
step
Type:
number
A number that specifies the granularity that the slider value must adhere to.
Attribute:
keyboard-step
Type:
number
♿ **ARIA:** A number that specifies the number of steps taken when interacting with
the slider via keyboard.
Attribute:
shift-key-multiplier
Type:
number
♿ **ARIA:** A number that will be used to multiply the
keyboardStep when the Shift key
is held down and the slider value is changed by pressing LeftArrow or RightArrow. Think
of it as keyboardStep * shiftKeyMultiplier.
Attribute:
custom-value-text
Type:
boolean
♿ **ARIA:** Whether custom
aria-valuemin, aria-valuenow, aria-valuemax, and
aria-valuetext values will be provided.
# Events
Type:
SliderDragStartEvent
Detail:
number
Fired when the user begins interacting with the slider and dragging the thumb. The event
detail contains the current value the drag is starting at.
Type:
SliderDragEndEvent
Detail:
number
Fired when the user stops dragging the slider thumb. The event detail contains the value
the drag is ending at.
Type:
SliderValueChangeEvent
Detail:
number
Fired when the slider value changes. The event detail contains the current value.
Type:
SliderDragValueChangeEvent
Detail:
number
Fired when the slider drag value changes. The drag value indicates the last slider value that
the user has dragged to. The event detail contains the value.
Type:
SliderPointerValueChangeEvent
Detail:
number
Fired when the device pointer is inside the slider region and it's position changes. The
event detail contains the value.
# CSS Props
Learn more about cssPropsThe ratio of the slider that is filled (eg:
0.3).
The current amount of the slider that is filled (eg:
30).
The fill rate expressed as a percentage such as (eg:
30%).
The ratio of the slider that is filled up to the device pointer.
The amount of the slider that is filled up to the device pointer.
The pointer rate expressed as a percentage.
Previous
<-
Time Slider
Next
Time
->