Skip to content
LSD Framework
Component

Range input

A slider primitive — single thumb, dual thumb, ticked, segmented. Fill flows from the origin toward the thumb in the accent gradient; the value tooltip follows in monospace so the readout never argues with the body type.

01 · Single thumb with tooltip
Brightness50
50
02 · Dual thumb (min / max)
Price range2070
03 · With tick marks
Trip length3
3
12345
04 · Labeled segments
05 · Disabled state
Locked threshold75
View HTML
<div class="rng" style="--p: 50%;">
  <span class="rng__tooltip">50</span>
  <input type="range" min="0" max="100" value="50" />
</div>

<div class="rng-dual" style="--a: 20%; --b: 70%;">
  <div class="rng-dual__track"></div>
  <div class="rng-dual__fill"></div>
  <input type="range" min="0" max="100" value="20" />
  <input type="range" min="0" max="100" value="70" />
</div>