sp-slider-handle
Attributes and Properties #
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
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 | | |
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 #
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>