• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Slider

Component status
Contribution
Last releasedUnreleased
Current version@spectrum-css/slider@3.0.3-alpha.1
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Standard
Contribution

Show markup
<div class="spectrum-Slider">
  <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 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>

With Label
Contribution

14
14
Show markup
<div class="spectrum-Slider">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-8" for="spectrum-Slider-input-8">Slider Label</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" id="spectrum-Slider-input-8">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>
<div class="spectrum-Slider is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-9" for="spectrum-Slider-input-9">Slider Label - Disabled</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"></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-9">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

Filled
Contribution

With fill.

14
14
Show markup
<div class="spectrum-Slider spectrum-Slider--filled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-6" for="spectrum-Slider-input-6">Slider Label</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" id="spectrum-Slider-input-6">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>
<div class="spectrum-Slider is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-7" for="spectrum-Slider-input-7">Slider Label - Disabled</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" disabled id="spectrum-Slider-input-7">
    </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">
  <div class="spectrum-Slider-labelContainer">
    <label class="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-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-18">
    </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">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-19" for="spectrum-Slider-input-19">Slider Label</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-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-19">
    </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 is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-19" for="spectrum-Slider-input-19">Slider Label</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-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-19">
    </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--range" role="group" aria-labelledby="spectrum-Slider-label-4">
  <div class="spectrum-Slider-labelContainer" role="presentation">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-4" for="spectrum-Slider-input-4-0">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-4">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-4-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-4-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--range is-disabled" role="group" aria-labelledby="spectrum-Slider-label-5">
  <div class="spectrum-Slider-labelContainer" role="presentation">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-5" for="spectrum-Slider-input-5-0">Slider Label - Disabled</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-5">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-5-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-5-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--tick">
  <div class="spectrum-Slider-labelContainer">
    <label class="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-track"></div>
    <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 class="spectrum-Slider-tick"></div>
    </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-14">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>
<div class="spectrum-Slider spectrum-Slider--tick is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="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-track"></div>
    <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 class="spectrum-Slider-tick"></div>
    </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-15">
    </div>
    <div class="spectrum-Slider-track"></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">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-12" for="spectrum-Slider-input-12">Slider Label</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-12">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <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-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-12">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>
<div class="spectrum-Slider is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-13" for="spectrum-Slider-input-13">Slider Label - Disabled</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-13">14</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <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-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-13">
    </div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

Video Player
Contribution

Displays a buffer for video players.

3:48
3:48
Show markup
<div class="spectrum-Slider">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-16" for="spectrum-Slider-input-16">My Video</label>
    <div class="spectrum-Slider-value">3:48</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-buffer" style="width: 20%;" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-labelledby="spectrum-Slider-label-16"></div>
    <div class="spectrum-Slider-handle" style="left: 20%;">
      <input type="range" class="spectrum-Slider-input" aria-valuetext="3:48" value="228" min="0" max="760" id="spectrum-Slider-input-16">
    </div>
    <div class="spectrum-Slider-buffer" style="left: 20%; width: 30%;"></div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

<div class="spectrum-Slider is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-17" for="spectrum-Slider-input-17">My Video</label>
    <div class="spectrum-Slider-value">3:48</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track"></div>
    <div class="spectrum-Slider-buffer" style="width: 20%;" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-labelledby="spectrum-Slider-label-16"></div>
    <div class="spectrum-Slider-handle" tabindex="0" style="left: 20%;">
      <input type="range" class="spectrum-Slider-input" aria-valuetext="3:48" value="228" min="0" max="760" disabled id="spectrum-Slider-input-17">
    </div>
    <div class="spectrum-Slider-buffer" style="left: 20%; right: 50%;"></div>
    <div class="spectrum-Slider-track"></div>
  </div>
</div>

Ramp
Contribution

14
14
Show markup
<div class="spectrum-Slider spectrum-Slider--ramp">
  <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-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-10">
    </div>
  </div>
</div>
<div class="spectrum-Slider spectrum-Slider--ramp is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider-label-11" for="spectrum-Slider-input-11">Slider Label - Disabled</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-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-11" 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.

No results found

Try another search term.