Skip to content
Relements Relements

Slider

Add .re-slider to a native <input type="range">. Keyboard interaction, form participation, and role="slider" semantics stay native — the class only restyles the track and thumb. See Accessibility below.

Basic

Section titled “Basic”
Live example
<label class="re-field">
  <span class="re-field__label">Volume</span>
  <input type="range" class="re-slider" min="0" max="100" value="50" />
</label>

Sizes

Section titled “Sizes”

Set data-size="sm" or data-size="lg"; the default is medium. Track and thumb scale together via the --re-slider-track-size and --re-slider-thumb-size custom properties, which you can also override directly.

Live example
<label class="re-field">
  <span class="re-field__label">Small</span>
  <input type="range" class="re-slider" data-size="sm" min="0" max="100" value="25" />
</label>
<label class="re-field">
  <span class="re-field__label">Medium (default)</span>
  <input type="range" class="re-slider" min="0" max="100" value="50" />
</label>
<label class="re-field">
  <span class="re-field__label">Large</span>
  <input type="range" class="re-slider" data-size="lg" min="0" max="100" value="75" />
</label>

States

Section titled “States”
Live example
<label class="re-field">
  <span class="re-field__label">Disabled</span>
  <input type="range" class="re-slider" min="0" max="100" value="40" disabled />
</label>

Accessibility

Section titled “Accessibility”
  • Keyboard — All native, since .re-slider only restyles the element. Tab moves focus to the thumb; Arrow keys (and Home/End for min/max, Page Up/Down for larger jumps) adjust the value. step, min, and max govern the increments.
  • Focus — :focus-visible draws the --re-shadow-focus ring on the thumb (the input’s own outline is removed so the ring tracks the thumb). The thumb also darkens on :hover.
  • Semantics — <input type="range"> carries an implicit role="slider", so assistive tech announces the current, minimum, and maximum values from value/min/max natively. Wrap the input in a <label> (the examples use .re-field with a .re-field__label) so the control has an accessible name.
  • Notes — Disabled is the native disabled attribute (the thumb dims and the cursor becomes not-allowed); no aria-disabled is needed. There is no built-in value readout — pair the slider with a visible output if users need to see the exact number.
Section titled “Related”