Slider

A form control allowing the user to select a value from a predefined range.

Basic Usage

You can create a Slider by creating an input element with a type of range and giving it the slider class.

<input
  class="slider"
  type="range"
  min="0"
  max="100"
  value="50"
/>

Label

As an accessibility best practice, Sliders should have a label. One way to do this is to place them in a Field.

Volume

<div class="field">
  <label for="volume-slider">Volume</label>
  <input
    id="volume-slider"
    class="slider"
    type="range"
    min="0"
    max="100"
    value="50"
  />
</div>