• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Slider

Component status
Contribution
Last releasedMay 23, 2023
Current version@spectrum-css/slider@4.0.5
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Standard
Contribution

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>

Sizes
Contribution

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 Label
Contribution

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>

Filled
Contribution

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-Offset
Contribution

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>

Range
Contribution

A range slider with two handles.

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>

Tick
Contribution

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 Labels
Contribution

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>

Ramp
Contribution

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