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.`
`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 #

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>

Spectrum Web Components