Sliders
Volume Slider API
# Props
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.
# 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:
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:
SliderValueChangeEvent
Detail:
number
Fired when the slider value changes. The event detail contains the current 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.
# Slots
Learn more about slotsUsed to insert a slider preview.
# CSS Vars
Learn more about cssVarsType:
string | number
The height of the slider.
Type:
string | number
The size (i.e., width/height) of the slider thumb.
Type:
string | number
The size (i.e., width/height) of the slider thumb when interacting with the slider.
Type:
string | number
The height of the slider tracks.
Type:
string | number
The height of the slider tracks when interacting with the slider.
Type:
number
The ratio of the slider that is filled (eg:
0.3).
Type:
number
The current amount of the slider that is filled (eg:
30).
Type:
string
The fill rate expressed as a percentage such as (eg:
30%).
Type:
number
The ratio of the slider that is filled up to the device pointer.
Type:
number
The amount of the slider that is filled up to the device pointer.
Type:
string
The pointer rate expressed as a percentage.
# Instance Props
Type:
SliderSubscribe
Enables subscribing to live updates of individually selected slider state.
Type:
number
A number that specifies the granularity that the slider value must adhere to.
Type:
number
♿ **ARIA:** A number that specifies the number of steps taken when interacting with
the slider via keyboard.
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.
Previous
<-
Time Slider
Next
Slider Value Text
->