Sliders
Volume Slider
This component is used to create a range input for controlling the volume of media.
📖 The <media-slider>
guide contains background documentation that can be used when working with the volume slider component.
Usage
The <media-volume-slider>
component receives volume updates from the provider through the media store, and dispatches a media-volume-change-request
event to request updating the current volume level on the provider as the slider value changes.
The media volume range is between 0
(min) and 1
(max), but on the slider it's between 0
and 100
. The conversion is automatically handled by this component.
Preview
Orientation
You can change the orientation of the slider to vertical by setting the aria-orientation
attribute like so:
Keyboard
The volume slider will receive keyboard input when focused. The interaction keys are based on standard accessibility guidelines.
The key-step
and shift-key-multiplier
can be used to configure how much to decrease/increase volume percentage by on key press like so:
In the snippet above, each keyboard step (e.g., pressing left or right arrow key) will respectively decrease/increase volume by 5%. Holding shift
will multiply by the step by 2, so a change of 10%.
👉 You can configure global volume keys on the player.
Styling
You can override the default styles with CSS like so:
Parts
Focus
CSS Variables
See the slider CSS variables for simple customization of the default slider styles.
Tailwind
Horizontal
A horizontal volume slider built with Tailwind:
Vertical
A vertical volume slider built with Tailwind:
Component API
Props
Name | Type |
---|---|
|
string
|
|
string
|
|
string
|
|
string
|
|
string
|
|
number
|
|
number
|
|
boolean
|
|
number
|
|
number
|
|
number
|
|
number
|
Events
Name | Type |
---|---|
|
SliderDragStartEvent
|
|
SliderDragEndEvent
|
|
SliderValueChangeEvent
|
|
SliderDragValueChangeEvent
|
|
SliderPointerValueChangeEvent
|
Name | Description |
---|---|
|
Used to insert a slider preview. |
CSS VarsLearn more about cssVars
Name | Type |
---|---|
|
string | number
|
|
string | number
|
|
string | number
|
|
string | number
|
|
string | number
|
|
readonly
string
|
|
readonly
string
|
CSS PartsLearn more about cssParts
Name | Description |
---|
Instance Props
Name | Type |
---|---|
|
readonly
SliderState
|
Instance Methods
Name | Type |
---|---|
|
(callback: (state: SliderState) => Maybe<Dispose>) => Unsubscribe
|