Range slider

Updated October 30, 2026

RangeSlider picks a low and a high value on one dithered track, for min-max filters. Each thumb is a native range input, so arrow keys, Page Up/Down and Home/End work, and the thumbs can't pass each other. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

Price

Locked

import "@/components/dithercharts/controls.css"
import { RangeSlider } from "@/components/dithercharts/range-slider"

<RangeSlider
  label="Price"
  min={0}
  max={500}
  step={10}
  defaultValue={[120, 360]}
  name="price" // submits price-min and price-max
  onValueChange={([low, high]) => setPrice({ low, high })}
/>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add range-slider

Props

It renders a native element, so every other attribute that element takes passes through.

RangeSlider props
Prop	Type	Default	Description
labelrequired	Type ReactNode	Default –	The caption above the track, and both thumbs' accessible name with "minimum" or "maximum" after it.
hideLabel	Type boolean	Default `false`	Keeps the label for screen readers only; the values hide with it.
showValue	Type boolean	Default `true`	Shows the current range beside the label.
min	Type number	Default –
max	Type number	Default –
step	Type number	Default –
value	Type readonly [number, number]	Default –	The chosen [low, high], for a controlled slider; pair it with `onValueChange`.
defaultValue	Type readonly [number, number]	Default the whole range	The [low, high] at first, for an uncontrolled slider.
onValueChange	Type (value: [number, number]) => void	Default –	Called with the new [low, high] as either thumb moves.
name	Type string	Default –	The inputs' form field names are `${name}-min` and `${name}-max`.
disabled	Type boolean	Default –
className	Type string	Default –