Slider

Purpose

A slider lets users select a numeric value by dragging a control along a track. Use sliders for settings like volume, price ranges, or confidence levels.

Usage Guidance

• Use native <input type="range"> whenever possible
• Always show the current value adjacent to the slider
• Label the slider with a visible <label>
• Consider whether a numeric input is more appropriate for precise values

Keyboard Support

Screen Reader Behavior

Screen readers announce the label, current value, and the min/max range when a slider receives focus.

ARIA Requirements

Native <input type="range"> requires no ARIA. For custom sliders:

• role="slider" on the draggable element
• aria-valuenow set to current value
• aria-valuemin set to minimum
• aria-valuemax set to maximum
• aria-valuetext when the numeric value needs a human-readable representation

Common Mistakes

• Not updating aria-valuenow dynamically as the value changes
• Missing visible current value indicator
• Custom sliders without keyboard support

Live Example

Code Example

<label for="confidence">
  Confidence Level:
  <span id="confidence-value" aria-live="polite">50%</span>
</label>
<input
  id="confidence"
  type="range"
  min="0"
  max="100"
  value="50"
  step="5"
>

<script>
  var slider = document.getElementById('confidence');
  var output = document.getElementById('confidence-value');
  slider.addEventListener('input', function() {
    output.textContent = slider.value + '%';
  });
</script>