- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Slider
Component status | Contribution |
---|---|
Last released | May 23, 2023 |
Current version | @spectrum-css/slider@4.0.5 |
Variants
StandardContribution
Show markup
<div class="spectrum-Slider spectrum-Slider--sizeM">
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20">
</div>
<div class="spectrum-Slider-track"></div>
</div>
</div>
<div class="spectrum-Slider spectrum-Slider--sizeM is-disabled">
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled>
</div>
<div class="spectrum-Slider-track"></div>
</div>
</div>
SizesContribution
S
14
M
14
L
14
XL
14
Show markup
<div class="spectrum-Examples">
<div class="spectrum-Examples-item" style="width: 200px">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
<div class="spectrum-Slider spectrum-Slider--sizeS">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeS spectrum-Slider-label" id="spectrum-Slider-label-1" for="spectrum-Slider-input-1">Slider Label</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-1">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-1">
</div>
<div class="spectrum-Slider-track"></div>
</div>
</div>
<div class="spectrum-Slider is-disabled spectrum-Slider--sizeS">
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled>
</div>
<div class="spectrum-Slider-track"></div>
</div>
</div>
</div>
<div class="spectrum-Examples-item" style="width: 200px">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
<div class="spectrum-Slider spectrum-Slider--sizeM">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Slider-label" id="spectrum-Slider-label-2" for="spectrum-Slider-input-2">Slider Label</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-2">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-2">
</div>
<div class="spectrum-Slider-track"></div>
</div>
</div>
<div class="spectrum-Slider spectrum-Slider--sizeM is-disabled spectrum-Slider--sizeM">
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled>
</div>
<div class="spectrum-Slider-track"></div>
</div>
</div>
</div>
<div class="spectrum-Examples-item" style="width: 200px">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
<div class="spectrum-Slider spectrum-Slider--sizeL">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-Slider-label" id="spectrum-Slider-label-3" for="spectrum-Slider-input-3">Slider Label</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-3">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-3">
</div>
<div class="spectrum-Slider-track"></div>
</div>
</div>
<div class="spectrum-Slider is-disabled spectrum-Slider--sizeL">
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled>
</div>
<div class="spectrum-Slider-track"></div>
</div>
</div>
</div>
<div class="spectrum-Examples-item" style="width: 200px">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
<div class="spectrum-Slider spectrum-Slider--sizeXL">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeXL spectrum-Slider-label" id="spectrum-Slider-label-4" for="spectrum-Slider-input-4">Slider Label</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-4">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-4">
</div>
<div class="spectrum-Slider-track"></div>
</div>
</div>
<div class="spectrum-Slider is-disabled spectrum-Slider--sizeXL">
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled>
</div>
<div class="spectrum-Slider-track"></div>
</div>
</div>
</div>
</div>
With LabelContribution
14
14
Show markup
<div class="spectrum-Slider spectrum-Slider--sizeM">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Slider-label" id="spectrum-Slider-label-5" for="spectrum-Slider-input-5">Slider Label</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-5">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-5">
</div>
<div class="spectrum-Slider-track"></div>
</div>
</div>
<div class="spectrum-Slider spectrum-Slider--sizeM is-disabled">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Slider-label" id="spectrum-Slider-label-6" for="spectrum-Slider-input-6">Slider Label - Disabled</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-6">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-6">
</div>
<div class="spectrum-Slider-track"></div>
</div>
</div>
FilledContribution
With fill.
14
14
Show markup
<div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--filled">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Slider-label" id="spectrum-Slider-label-7" for="spectrum-Slider-input-7">Slider Label</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-7">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-7">
</div>
<div class="spectrum-Slider-track"></div>
</div>
</div>
<div class="spectrum-Slider spectrum-Slider--sizeM is-disabled">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Slider-label" id="spectrum-Slider-label-8" for="spectrum-Slider-input-8">Slider Label - Disabled</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-8">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-8">
</div>
<div class="spectrum-Slider-track"></div>
</div>
</div>
Filled-OffsetContribution
With fill and offset.
14
14
14
Show markup
<div class="spectrum-Slider spectrum-Slider--sizeM">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Slider-label" id="spectrum-Slider-label-9" for="spectrum-Slider-input-9">Slider Label</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-9">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track" style="width: 25%;"></div>
<div class="spectrum-Slider-handle" style="left: 20%;">
<input type="range" class="spectrum-Slider-input" value="14" min="10" max="20" id="spectrum-Slider-input-9">
</div>
<div class="spectrum-Slider-track" style="width: 50%;"></div>
<div class="spectrum-Slider-fill" style="left: 20%; width: 30%"></div>
</div>
</div>
<div class="spectrum-Slider spectrum-Slider--sizeM">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-Slider-label" id="spectrum-Slider-label-10" for="spectrum-Slider-input-10">Slider Label</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-10">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track" style="width: 25%;"></div>
<div class="spectrum-Slider-handle" style="left: 70%;">
<input type="range" class="spectrum-Slider-input" value="14" min="10" max="20" id="spectrum-Slider-input-10">
</div>
<div class="spectrum-Slider-track" style="width: 50%;"></div>
<div class="spectrum-Slider-fill spectrum-Slider-fill--right" style="left: 50%; width: 20%"></div>
</div>
</div>
<div class="spectrum-Slider spectrum-Slider--sizeM is-disabled">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Slider-label" id="spectrum-Slider-label-11" for="spectrum-Slider-input-11">Slider Label</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-11">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-track" style="width: 25%;"></div>
<div class="spectrum-Slider-handle" style="left: 70%;">
<input type="range" class="spectrum-Slider-input" value="14" min="10" max="20" id="spectrum-Slider-input-11">
</div>
<div class="spectrum-Slider-track" style="width: 50%;"></div>
<div class="spectrum-Slider-fill spectrum-Slider-fill--right" style="left: 50%; width: 20%"></div>
</div>
</div>
RangeContribution
A range slider with two handles.
14 - 48
14 - 48
Show markup
<div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--range" role="group" aria-labelledby="spectrum-Slider-label-12">
<div class="spectrum-Slider-labelContainer" role="presentation">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Slider-label" id="spectrum-Slider-label-12" for="spectrum-Slider-input-12-0">Slider Label</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-12">14 - 48</div>
</div>
<div class="spectrum-Slider-controls" role="presentation">
<div class="spectrum-Slider-track" style="width: 20%;"></div>
<div class="spectrum-Slider-handle" style="left: 20%;" role="presentation">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" aria-label="min" id="spectrum-Slider-input-12-0" aria-labelledby="spectrum-Slider-label-4 spectrum-Slider-input-4-0">
</div>
<div class="spectrum-Slider-track" style="left: 20%; right: 40%;"></div>
<div class="spectrum-Slider-handle" style="left: 60%;" role="presentation">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" aria-label="max" id="spectrum-Slider-input-12-1" aria-labelledby="spectrum-Slider-label-4 spectrum-Slider-input-4-1">
</div>
<div class="spectrum-Slider-track" style="width: 40%;"></div>
</div>
</div>
<div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--range is-disabled" role="group" aria-labelledby="spectrum-Slider-label-13">
<div class="spectrum-Slider-labelContainer" role="presentation">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Slider-label" id="spectrum-Slider-label-13" for="spectrum-Slider-input-13-0">Slider Label - Disabled</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-13">14 - 48</div>
</div>
<div class="spectrum-Slider-controls" role="presentation">
<div class="spectrum-Slider-track" style="width: 20%;"></div>
<div class="spectrum-Slider-handle" style="left: 20%;" role="presentation">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" aria-label="min" disabled id="spectrum-Slider-input-13-0" aria-labelledby="spectrum-Slider-label-5 spectrum-Slider-input-5-0">
</div>
<div class="spectrum-Slider-track" style="left: 20%; right: 40%;"></div>
<div class="spectrum-Slider-handle" style="left: 60%;" role="presentation">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" aria-label="max" disabled id="spectrum-Slider-input-13-1" aria-labelledby="spectrum-Slider-label-5 spectrum-Slider-input-5-1">
</div>
<div class="spectrum-Slider-track" style="width: 40%;"></div>
</div>
</div>
TickContribution
Spectrum tick slider
14
14
Show markup
<div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--tick">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Slider-label" id="spectrum-Slider-label-14" for="spectrum-Slider-input-14">Slider Label</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-14">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-ticks">
<div class="spectrum-Slider-tick"></div>
<div class="spectrum-Slider-tick"></div>
<div class="spectrum-Slider-tick"></div>
<div class="spectrum-Slider-tick"></div>
<div class="spectrum-Slider-tick"></div>
</div>
<div class="spectrum-Slider-trackContainer">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-track"></div>
</div>
<div class="spectrum-Slider-handleContainer">
<div class="spectrum-Slider-handle" style="left: 75%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-14">
</div>
</div>
</div>
</div>
<div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--tick is-disabled">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Slider-label" id="spectrum-Slider-label-15" for="spectrum-Slider-input-15">Slider Label - Disabled</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-15">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-ticks">
<div class="spectrum-Slider-tick"></div>
<div class="spectrum-Slider-tick"></div>
<div class="spectrum-Slider-tick"></div>
<div class="spectrum-Slider-tick"></div>
<div class="spectrum-Slider-tick"></div>
</div>
<div class="spectrum-Slider-trackContainer">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-track"></div>
</div>
<div class="spectrum-Slider-handleContainer">
<div class="spectrum-Slider-handle" style="left: 75%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-15">
</div>
</div>
</div>
</div>
Tick with LabelsContribution
Spectrum tick slider with labels
14
0
20
40
60
80
100
14
0
20
40
60
80
100
Show markup
<div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--tick">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Slider-label" id="spectrum-Slider-label-16" for="spectrum-Slider-input-16">Slider Label</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-16">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-ticks">
<div class="spectrum-Slider-tick">
<div class="spectrum-Slider-tickLabel">0</div>
</div>
<div class="spectrum-Slider-tick">
<div class="spectrum-Slider-tickLabel">20</div>
</div>
<div class="spectrum-Slider-tick">
<div class="spectrum-Slider-tickLabel">40</div>
</div>
<div class="spectrum-Slider-tick">
<div class="spectrum-Slider-tickLabel">60</div>
</div>
<div class="spectrum-Slider-tick">
<div class="spectrum-Slider-tickLabel">80</div>
</div>
<div class="spectrum-Slider-tick">
<div class="spectrum-Slider-tickLabel">100</div>
</div>
</div>
<div class="spectrum-Slider-trackContainer">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-track"></div>
</div>
<div class="spectrum-Slider-handleContainer">
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-16">
</div>
</div>
</div>
</div>
<div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--tick is-disabled">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Slider-label" id="spectrum-Slider-label-17" for="spectrum-Slider-input-17">Slider Label - Disabled</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-17">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-ticks">
<div class="spectrum-Slider-tick">
<div class="spectrum-Slider-tickLabel">0</div>
</div>
<div class="spectrum-Slider-tick">
<div class="spectrum-Slider-tickLabel">20</div>
</div>
<div class="spectrum-Slider-tick">
<div class="spectrum-Slider-tickLabel">40</div>
</div>
<div class="spectrum-Slider-tick">
<div class="spectrum-Slider-tickLabel">60</div>
</div>
<div class="spectrum-Slider-tick">
<div class="spectrum-Slider-tickLabel">80</div>
</div>
<div class="spectrum-Slider-tick">
<div class="spectrum-Slider-tickLabel">100</div>
</div>
</div>
<div class="spectrum-Slider-trackContainer">
<div class="spectrum-Slider-track"></div>
<div class="spectrum-Slider-track"></div>
</div>
<div class="spectrum-Slider-handleContainer">
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-17">
</div>
</div>
</div>
</div>
RampContribution
14
14
Show markup
<div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--ramp">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Slider-label" id="spectrum-Slider-label-18" for="spectrum-Slider-input-18">Slider Label</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-18">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-ramp">
<svg viewBox="0 0 240 16" preserveAspectRatio="none" aria-hidden="true" focusable="false">
<path d="M240,4v8c0,2.3-1.9,4.1-4.2,4L1,9C0.4,9,0,8.5,0,8c0-0.5,0.4-1,1-1l234.8-7C238.1-0.1,240,1.7,240,4z"></path>
</svg>
</div>
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-18">
</div>
</div>
</div>
<div class="spectrum-Slider spectrum-Slider--sizeM spectrum-Slider--ramp is-disabled">
<div class="spectrum-Slider-labelContainer">
<label class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Slider-label" id="spectrum-Slider-label-19" for="spectrum-Slider-input-19">Slider Label - Disabled</label>
<div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-19">14</div>
</div>
<div class="spectrum-Slider-controls">
<div class="spectrum-Slider-ramp">
<svg viewBox="0 0 240 16" preserveAspectRatio="none" aria-hidden="true" focusable="false">
<path d="M240,4v8c0,2.3-1.9,4.1-4.2,4L1,9C0.4,9,0,8.5,0,8c0-0.5,0.4-1,1-1l234.8-7C238.1-0.1,240,1.7,240,4z"></path>
</svg>
</div>
<div class="spectrum-Slider-handle" style="left: 40%;">
<input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-19" disabled>
</div>
</div>
</div>
Migration Guide
Dial is now a separate component
Dial has been moved to the Dial component.
Color slider is now a separate component
Color slider has been moved to the Color Slider component.
Replace class names starting with .spectrum-Slider
with .spectrum-ColorSlider
.
Use class is-dragged
instead of u-isGrabbing
On spectrum-Slider-handle
when dragging, use is-dragged
instead of u-isGrabbing
.
Three Handles is included in the range
variant
When using a slider with three handles, classify it as a range
variant to apply correct styling