Sliders
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.
A step is an abstract unit that may carry a different type of measure depending on the type of
slider. For example, for the volume slider each step is 1% of volume, and for the time slider
it is 1 second which is a varying percentage depending on the media duration.
Attribute:
key-step
Type:
number
♿ **ARIA:** A number that specifies the number of steps taken when interacting with
the slider via keyboard.
A step is an abstract unit that may carry different type of measure depending on the type of
slider. For example, for the volume slider each step is 1% of volume, and for the time slider
it is 1 second which is a varying percentage depending on the media duration.
Attribute:
shift-key-multiplier
Type:
number
♿ **ARIA:** A number that will be used to multiply the
keyStep when the Shift key
is held down and the slider value is changed by pressing LeftArrow or RightArrow. Think
of it as keyStep * 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:
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 preview value. Do note, this includes touch, mouse, and keyboard
devices.
# 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:
{ readonly value: number; readonly pointerValue: number; readonly min: number; readonly max: number; readonly focused: boolean; readonly dragging: boolean; readonly pointing: boolean; readonly interactive: boolean; readonly fillRate: number; readonly fillPercent: number; readonly pointerRate: number; readonly pointerPercent: number; }
This object contains all current slider state (e.g.,
dragging, fillPercent, etc.).
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.
A step is an abstract unit that may carry a different type of measure depending on the type of
slider. For example, for the volume slider each step is 1% of volume, and for the time slider
it is 1 second which is a varying percentage depending on the media duration.
Type:
number
♿ **ARIA:** A number that specifies the number of steps taken when interacting with
the slider via keyboard.
A step is an abstract unit that may carry different type of measure depending on the type of
slider. For example, for the volume slider each step is 1% of volume, and for the time slider
it is 1 second which is a varying percentage depending on the media duration.
Type:
number
♿ **ARIA:** A number that will be used to multiply the
keyStep when the Shift key
is held down and the slider value is changed by pressing LeftArrow or RightArrow. Think
of it as keyStep * shiftKeyMultiplier.
Previous
<-
Captions Button
Next
Time Slider
->