Skip to content

role slider

Slider draft v0.1.0

Lets people pick a value in a range by moving a thumb along a track.

A slider sets a value whose position in a range matters more than its exact figure: a volume, a brightness, a price ceiling. A thumb slides along a track between a minimum and a maximum, by steps; the value can be shown next to the label. When the exact number matters, a Number field is better, alone or next to the slider.

Playground

HTML 
<div class="ds-slider" data-size="medium">
  <div class="ds-slider__header">
    <label
      class="ds-slider__label"
      data-part="label"
      for="ds-slider-16"
    >Volume</label>
  </div>
  <input
    type="range"
    class="ds-slider__control"
    data-part="control"
    id="ds-slider-16"
    min="0"
    max="100"
    step="1"
    value="50"
  >
</div>