sp-slider-handle
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 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>