Range Slider

A range slider styles native <input type="range"> controls with optional tooltips, step markers, and vertical layout.

Examples

Basic Range Slider

Wrap the control in .ro-range-slider and .ro-range. Set CSS variables --ro-range-min, --ro-range-max, and --start-value on the root.

<div class="ro-range-slider" style="--ro-range-min: 0; --ro-range-max: 100; --start-value: 40;">
  <div class="ro-range">
    <div class="ro-range-track">
      <input type="range" min="0" max="100" value="40" aria-label="Volume" />
    </div>
  </div>
  <output class="ro-range-output">40</output>
</div>

Preview

40

Sizing

Use .ro-size-sm or .ro-size-lg on .ro-range-slider.

<div class="ro-range-slider ro-size-sm" style="--ro-range-min: 0; --ro-range-max: 100; --start-value: 25;">…</div>
<div class="ro-range-slider ro-size-lg" style="--ro-range-min: 0; --ro-range-max: 100; --start-value: 75;">…</div>

Vertical

Add .ro-dir-vertical for a vertical slider.

<div class="ro-range-slider ro-dir-vertical" style="--ro-range-min: 0; --ro-range-max: 100; --start-value: 60;">…</div>

Disabled

Add .ro-is-disabled on .ro-range-slider and disable the input.

Required CSS Variables

Variable	Description
--ro-range-min	Minimum value of the range.
--ro-range-max	Maximum value of the range.
--start-value	Current value for single-thumb sliders.
--end-value	Second thumb value for dual-range (.ro-is-range).
--value	Per-thumb position for tooltips.
--content	Tooltip label text.

Modifiers

Class	Description
.ro-size-sm, .ro-size-lg	Smaller or larger track and thumb.
.ro-dir-vertical	Vertical orientation.
.ro-color-scheme-grey	Grey output background.
.ro-is-disabled	Disabled appearance.
.ro-is-range	Dual-thumb range layout.
.ro-range-output	Value display beside the track.
.ro-range-tooltip	Per-thumb tooltip (--value, --content on the element).
.ro-range-step	Step marker on the track (--value; .ro-is-min / .ro-is-max for edges).
.ro-range-media, .ro-range-icon	Min/max icon slots.
.ro-is-min, .ro-is-max	Edge modifiers on output, tooltip, or step markers in dual range.

JavaScript is required to sync --start-value, --end-value, and output elements when the user drags the thumb.