sp-slider-handle

Examples API

Attributes and Properties #

Property Attribute Type Default Description
autofocus autofocus boolean false When this control is rendered, focus it automatically
dir dir 'ltr' | 'rtl' 'ltr'
disabled disabled boolean false Disable this control. It will not receive focus or events
dragging dragging boolean false
formatOptions format-options NumberFormatOptions | undefined
highlight highlight boolean false
label label string ''
max max number | 'next' | undefined
min min number | 'previous' | undefined
name name string ''
step step number | undefined
tabIndex tabIndex number The tab index to apply to this control. See general documentation about the tabindex HTML property
value value number 10

Events #

Name Type Description
change Event An alteration to the value of the element has been committed by the user.
input Event The value of the element has changed.

Description #

Some advanced slider uses require more than one handle. One example of this is the range slider above. <sp-slider> supports multiple handles via the <sp-slider-handle> sub-component, although it would be very rare to ever require more than two handles.

Single Handles #

<sp-slider-handle> is unnecessary for single-handle sliders. Always slot two or more <sp-slider-handle> components together. To customize the properties of a single-handle slider (normalization, value, etc), set them on the <sp-slider> element directly.

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/slider

Import the side effectful registration of <sp-slider> and <sp-slider-handle> via:

import '@spectrum-web-components/slider/sp-slider.js';
import '@spectrum-web-components/slider/sp-slider-handle.js';

Examples #

Range Slider #

This examples uses the "range" variant along with two handles to create a range slider.

<sp-slider variant="range" step="1" min="0" max="255">
Output Levels
<sp-slider-handle
slot="handle"
name="min"
label="Minimum"
value="5"
>
</sp-slider-handle>
<sp-slider-handle
slot="handle"
name="max"
label="Maximum"
value="250"
>
</sp-slider-handle>
</sp-slider>

Multi-handle Slider with Ordered Handles #

For slider handles that have the same numeric range, you can specify min="previous" or max="next" to constrain handles by the values of their neighbours.

<sp-slider step="1" min="0" max="255">
Output Levels
<sp-slider-handle
slot="handle"
name="low"
label="Low"
value="5"
max="next"
>
</sp-slider-handle>
<sp-slider-handle
slot="handle"
name="mid"
label="Mid"
value="100"
min="previous"
max="next"
>
</sp-slider-handle>
<sp-slider-handle
slot="handle"
name="high"
label="High"
value="250"
min="previous"
>
</sp-slider-handle>
</sp-slider>