Slider — RenDS Components

About

Overview

Sliders are the right control when the user picks a value from a continuous (or finely stepped) range. Use them when precision is approximate — opacity, font size, brightness. For exact numbers, use a Number Field. For 2-3 options, use a Toggle Group.

Live

Demo

Volume

Brightness

<ren-slider class="ren-slider" show-value>
  <label class="ren-slider-label" for="volume">Volume</label>
  <div class="ren-slider-track">
    <input id="volume" type="range" min="0" max="100" step="1" value="60">
  </div>
</ren-slider>

Reference

API

Class / attribute	Effect
`.ren-slider`	The stacked wrapper (label, track, marks). Goes on the `<ren-slider>` host — never on the input.
`.ren-slider-track`	The element wrapping the native `<input type="range">`. This is what styles the rail, the fill and the thumb.
`show-value` / `unit`	Host attributes. `show-value` renders the `.ren-slider-value` readout the component keeps in sync; `unit` suffixes it (`unit="%"`).
`min` / `max` / `step`	Native attributes on the input. `step` lets you snap to discrete values (e.g. `step="5"`).
`value`	Current value. Read it from the host (`slider.value`) or the input (`input.valueAsNumber`); the host fires `ren-slider-input` and `ren-slider-change`.

Dual-handle (range)

For "from–to" ranges, put two real inputs inside a .ren-slider-range rail. The host keeps them from crossing and exposes value as a two-number tuple, in input order.

<ren-slider class="ren-slider" show-value>
  <div class="ren-slider-range">
    <div class="ren-slider-track-input"></div>
    <input type="range" min="0" max="100" step="5" value="20" aria-label="Minimum price">
    <input type="range" min="0" max="100" step="5" value="80" aria-label="Maximum price">
  </div>
</ren-slider>

Inclusive by default

Accessibility

Native <input type="range"> already announces "slider, value 60 of 100".
Keyboard works out of the box: arrow keys step ±1, Page Up / Page Down step ±10, Home / End jump to min / max.
Always pair with a <label> describing what's being adjusted.
Show the current value visibly — add show-value on the host and the component keeps the readout in sync. Sliders without a numeric readout are hard to use precisely.