Elastic Range Slider
A single-track, dual-thumb range slider — a min and a max handle sharing one track, for things like price filters. Built in the same visual language as Elastic Slider.
Last updated January 1, 1980
CreditsModifiedPublished
Copied from Josh Puckett — Interface Craft and Chánh Đại — Elastic Slider.
- New component, not part of the original Elastic Slider — extracted from a single-value slider into its own dual-thumb primitive, with the same spring-animated drag, rubber-band overshoot, and step-snap on release
- Positioning stays physically left-to-right in both LTR and RTL — the left handle always controls the left edge and the right handle always controls the right edge, so drag direction never flips under RTL
- Each thumb clamps a step short of the other's current value, so min and max can never meet, cross, or collapse to a single point
- Same hover/active decile hash marks as Elastic Slider, positioned physically so they line up with the track regardless of direction
Overview
Installation
Usage
import { ElasticRangeSlider } from "@/components/elastic-range-slider"
const [range, setRange] = useState<[number, number]>([200, 700])
<ElasticRangeSlider
label="Price"
min={0}
max={1000}
step={10}
value={range}
onValueChange={setRange}
formatValue={(v) => \`$\${v}\`}
/>Examples
Toman price range
A Persian-market pattern: Toman pricing with Persian digits, and the selected range spelled out below the track as از … تومان / تا … تومان.