Slider

What Is a Slider?

A slider is a UI control that lets users select a value from a range by moving a thumb horizontally (or vertically). It is commonly used for volume, brightness, playback position, and similar settings.

The key points are: communicate the current value and the allowed range (min/max) to users who cannot see the screen, and make it operable with a keyboard, not just a mouse.

Why Does Accessibility Matter?

• Keyboard-only users. If the thumb is a plain <div>, it cannot receive focus with Tab and the arrow keys won't change its value. A mouse-only implementation becomes completely inoperable.
• Screen reader users. Without the slider role, current value, and range, users have no way to know what percentage they are at or how far they can adjust.

The easiest way to satisfy both requirements is the native<input type="range">. The browser provides keyboard interaction and screen reader announcements out of the box.

Live Demo (Recommended Implementation)

Below is a native <input type="range">.Try operating it without a mouse — focus the thumb and use the arrow keys.

Keyboard Interaction

Required WAI-ARIA Roles & Properties

Recommended Pattern (Good)

Markup:

<label for="volume">Volume</label>
<input
  type="range"
  id="volume"
  name="volume"
  min="0"
  max="100"
  step="1"
  value="40" />
<output for="volume" id="volume-out">40</output>

Display sync (optional — the input itself handles announcements):

const input = document.getElementById('volume');
const out = document.getElementById('volume-out');

// Update the output whenever the value changes (for display; the input handles announcements)
input.addEventListener('input', () => {
  out.textContent = input.value;
});

Only build a custom slider with role="slider" when native styling truly cannot meet design requirements. In that case, you must provide the value, range, and keyboard interaction entirely on your own.

<!-- Only build a custom slider when native styling won't meet design requirements -->
<span id="bright-label">Brightness</span>
<div
  role="slider"
  tabindex="0"
  aria-labelledby="bright-label"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="40"
  aria-valuetext="40%"
  class="slider"
  id="bright-slider">
  <span class="slider-thumb"></span>
</div>

const slider = document.getElementById('bright-slider');
const MIN = 0, MAX = 100, STEP = 1, BIG = 10;

function setValue(next) {
  const v = Math.min(MAX, Math.max(MIN, next));
  slider.setAttribute('aria-valuenow', String(v));
  slider.setAttribute('aria-valuetext', v + '%'); // Provide a human-readable unit
  slider.style.setProperty('--pos', ((v - MIN) / (MAX - MIN)) * 100 + '%');
}

slider.addEventListener('keydown', (e) => {
  const now = Number(slider.getAttribute('aria-valuenow'));
  let next = now;
  switch (e.key) {
    case 'ArrowRight': case 'ArrowUp':   next = now + STEP; break;
    case 'ArrowLeft':  case 'ArrowDown': next = now - STEP; break;
    case 'PageUp':   next = now + BIG; break;
    case 'PageDown': next = now - BIG; break;
    case 'Home': next = MIN; break;
    case 'End':  next = MAX; break;
    default: return; // Let unrelated keys pass through
  }
  e.preventDefault();
  setValue(next);
});

Anti-pattern (Bad)

Below is a slider built by mouse-dragging a <div>.It works with a mouse, but is completely inoperable via keyboard, and the value is never announced to screen readers.

<!-- ❌ Anti-pattern: drag-only div -->
<div class="track" onmousedown="startDrag(event)">
  <div class="knob" id="knob"></div>
</div>
<!--
  No role or tabindex, so it can't receive focus
  and can't be operated with a keyboard at all.
  No aria-valuenow either, so the current value is never announced.
-->

Implementation Checklist

• Considered using input type="range" first (highest priority)
• The thumb has an accessible name (label for or aria-label / aria-labelledby)
• The thumb is focusable via keyboard and values change with Left / Right Arrow
• Home / End move to the minimum / maximum values
• For custom implementations, role="slider" + aria-valuemin / aria-valuemax / aria-valuenow are present
• aria-valuenow is updated each time the value changes
• aria-valuetext is provided when the numeric value alone is not meaningful
• Focus is visible (focus ring is not suppressed)

Source (English):Slider Pattern — W3C APG(opens in a new tab)