Slider

Sliders style the native <input type="range"> element with design system tokens. They support labels, live value display, and disabled states.

Tokens

Basic usage

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

With label and live value

Use .slider-wrapper, .slider-header, and .slider-value for a labelled slider with live value display.

<div class="slider-wrapper">
  <div class="slider-header">
    <label for="opacity">Opacity</label>
    <span class="slider-value" id="opacity-val">75%</span>
  </div>
  <input type="range" id="opacity" min="0" max="100" value="75"
    oninput="document.getElementById('opacity-val').textContent = this.value + '%'">
</div>

Disabled

<input type="range" min="0" max="100" value="30" disabled>

Accessibility notes

• The native <input type="range"> is announced by screen readers automatically
• Always pair with a <label> or aria-label
• The min, max, step, and value attributes are exposed to assistive technology

Do / Don't

Do:

• Use sliders for continuous values (volume, opacity, price range)
• Show the current value with .slider-value for clarity
• Use step to control precision

Don't:

• Don't use sliders for precise numeric entry — use a number input instead
• Don't use sliders without a visible label or value indicator