sp-slider-handle

Examples API

Attributes and Properties #

Property Attribute Type Default Description disabled disabled boolean false Disable this control. It will not receive focus or events dragging dragging boolean false 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

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. sp-slider-handle-ready CustomEvent

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 previous/nextElementSiblings. Keep in mind that the first slider handle with not have a previous handle to be its min and the last slider handle will not have a next handle to be its max.

<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>