sp-slider-handle

NPM

1.0.0

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API

Attributes and Properties #

Property Attribute Type Default Description defaultValue default-value number Set the default value of the handle. Setting this property will cause the handle to reset to the default value on double click or pressing the `escape` key. 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 By default, the value of a Slider Handle will be halfway between its `min` and `max` values, or the `min` value when `max` is less than `min`.

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>