RRenDSv0.13.0
GitHubGet started

Composite

Slider Requires JS

Range input for numeric values: volume, opacity, brightness, price ranges. Built on the native <input type="range"> with a styled track and thumb. Single-handle by default; dual handle for ranges.

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

<label>
  <span>Volume</span>
  <input type="range" class="ren-slider" min="0" max="100" value="60">
</label>

Reference

API

Class / attributeEffect
.ren-sliderApply on a native <input type="range">. Styles the track and thumb consistently across browsers.
min / max / stepNative attributes. step lets you snap to discrete values (e.g. step="5").
valueCurrent value. Read it via input.valueAsNumber.

Dual-handle (range)

For "from–to" ranges, use <ren-slider type="range"> — the Web Component renders two thumbs and exposes value as a tuple.

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 (<output> bound to the slider's id) — sliders without a numeric readout are hard to use precisely.