Slider

A slider lets the user pick a numeric value from a continuous range: volume, opacity, font size, a price filter ceiling. Zazz styles the native <input type="range"> element in the reset, so a plain <input type="range"> already takes on the Zazz theme. No custom JS required.

Default

export default function SliderDefault() {  return (    <input      type="range"      min={0}      max={100}      defaultValue={50}      aria-label="Volume"      style={{ maxWidth: "20rem" }}    />  );}

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

The reset handles the track and thumb styling. Most projects can use the bare input.

Tokens

The thumb is a circular knob with a primary-colored border, sitting on a muted track. The active region (left of the thumb) is the same color as the inactive region; sliders don't fill the track by default. Add a custom paint via JavaScript and CSS if you need a filled track.

States

• Default. Thumb at the current value, track muted.
• Focus. Browser-default focus indicator applies. For visual consistency, override with box-shadow: var(--focus-ring) on :focus-visible.
• Disabled. Set disabled on the input. The track and thumb mute further.

Form composition

<div class="form-group">
  <label class="form-label" for="volume">Volume</label>
  <input type="range" class="range" id="volume" min="0" max="100" value="50" />
  <output class="text-sm text-muted-foreground" for="volume">50</output>
</div>

The <output> element pairs with the slider to display the current value. Wire it with a small JS listener:

const slider = document.querySelector('#volume');
const output = document.querySelector('output[for="volume"]');
slider.addEventListener('input', () => output.value = slider.value);

Accessibility

• The native <input type="range"> handles keyboard navigation (Arrow keys, Home/End) and screen reader announcement automatically.
• Always provide a <label> describing what the slider controls.
• For values that aren't immediately meaningful as numbers (a temperature in degrees, a percentage), pair with <output> so the value is visible to sighted users in real time.
• Use min, max, and step to define the valid range. The browser communicates these to assistive tech via the implicit aria-valuemin, aria-valuemax, and aria-valuenow properties.

Cross-platform

Where to next