Slider

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/slider@2.0.0

Variants#


Standard#
Contribution

<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>
Show markup

With Label#
Contribution

14
14
<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>
Show markup

Filled#
Contribution

With fill.

14
14
<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>
Show markup

Filled-Offset#
Contribution

With fill and offset.

14
14
14
<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>
Show markup

Range#
Contribution

A range slider with two handles.

<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>
Show markup

Tick#
Contribution

Spectrum tick slider

14
14
<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>
Show markup

Tick with Labels#
Contribution

Spectrum tick slider with labels

14
0
20
40
60
80
100
14
0
20
40
60
80
100
<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>
Show markup

Video Player#
Contribution

Displays a buffer for video players.

3:48
3:48
<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>
Show markup

Ramp#
Contribution

14
14
<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>
Show markup

Color#
Deprecated

Spectrum Color slider

A new color slider is forthcoming.

#2680eb
#2680eb
#2680eb
<div class="spectrum-Slider spectrum-Slider--color">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider--color-label-0" for="spectrum-Slider--color-input-0">Color</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider--color-label-0">#2680eb</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track" style="background: linear-gradient(to right, rgb(38, 128, 235), rgb(9, 90, 186))"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" aria-valuetext="#2680eb" step="2" min="10" max="20" id="spectrum-Slider--color-input-0">
    </div>
  </div>
</div>
<div class="spectrum-Slider spectrum-Slider--color">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider--color-label-1" for="spectrum-Slider--color-input-1">Color (showing alpha)</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider--color-label-1">#2680eb</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track" style="background: linear-gradient(to right, rgba(38, 128, 235, .5), rgb(9, 90, 186))"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" aria-valuetext="#2680eb" step="2" min="10" max="20" id="spectrum-Slider--color-input-1">
    </div>
  </div>
</div>
<div class="spectrum-Slider spectrum-Slider--color is-disabled">
  <div class="spectrum-Slider-labelContainer">
    <label class="spectrum-Slider-label" id="spectrum-Slider--color-label-2" for="spectrum-Slider--color-input-2">Color</label>
    <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider--color-label-2">#2680eb</div>
  </div>
  <div class="spectrum-Slider-controls">
    <div class="spectrum-Slider-track" style="background: linear-gradient(to right, rgba(38, 128, 235, .5), rgb(9, 90, 186))"></div>
    <div class="spectrum-Slider-handle" style="left: 40%;">
      <input type="range" class="spectrum-Slider-input" value="14" aria-valuetext="#2680eb" step="2" min="10" max="20" disabled id="spectrum-Slider--color-input-2">
    </div>
  </div>
</div>
Show markup