Range

input[type="range"] is full width with a thin track and a round thumb. The thumb grows slightly while it is dragged.

<label>
  Volume
  <input type="range" name="volume" min="0" max="100" value="40" />
</label>

Accessibility#

Give the slider a label. For a value that matters, show it in an output element linked with for, so the number is readable without dragging.

<form oninput="level.value = volume.value">
  <label for="volume">Volume</label>
  <input type="range" id="volume" name="volume" min="0" max="100" value="40" />
  <output name="level" for="volume">40</output>
</form>

Customization#

--pico-range-border-color

light-dark(#dcdee2, #404247)

Track color.

--pico-range-active-border-color

light-dark(#cbced3, #505257)

Track color while active or focused.

--pico-range-thumb-border-color

var(--pico-background-color)

Thumb border.

--pico-range-thumb-color

var(--pico-primary-background)

Thumb color.

--pico-range-thumb-active-color

var(--pico-primary-background)

Thumb color while active or focused.

A range input has no border or padding, so it shows no visible validation style.