What is Range slider?

A range slider lets the user pick an interval instead of a single value. Two thumbs sit on one rail; the segment between them is the selected range and is usually filled with the accent color. Price filters on shopping sites are the classic use, along with date windows on charts, age brackets in forms, and minimum and maximum thresholds in monitoring settings. It is a sibling of the single-thumb slider and shares every rule of that control, plus a few of its own.

When to use it

• Approximate ranges on a continuous scale, where moving a thumb and watching results update is faster than typing two numbers.
• Bounded scales with a known minimum and maximum. If the data has outliers, one product at 50,000 next to hundreds under 100, a linear slider wastes most of the rail; use a logarithmic scale or quantiles.
• Not for exact values. Hitting precisely 1,250 with a pointer is hard. Show the current values as text and offer paired number inputs for precision.
• Below about ten possible values, a pair of selects or a radio group is clearer.

Accessibility

Each thumb is its own role="slider" with aria-valuemin, aria-valuemax and aria-valuenow, plus aria-valuetext when the number alone is not meaningful ("$1,250" rather than "1250"). The two thumbs need distinct names, such as Minimum price and Maximum price. The native <input type="range"> provides a single thumb; a two-thumb control is custom, which is why a tested primitive matters.

• Arrow keys move the focused thumb by one step; Page Up and Page Down move by a larger step; Home and End jump to the ends.
• Thumbs must not cross. Either stop a thumb at the other one or swap which thumb is which, and keep a minimum gap when the two values cannot be equal.
• Thumbs need at least a 24 by 24 CSS pixel target, and more on touch screens.
• Show the values as visible text near the thumbs or beside the control, so the result does not depend on reading a position.

How to build one in React

MiniDev's RangeSlider is the two-thumb version of Slider, both built on Base UI. It accepts min, max, step, a format for the value bubbles, and onValueCommitted, which fires once when the thumb is released:

"use client"
import * as React from "react"
import { RangeSlider } from "@/components/ui/range-slider"

export function PriceFilter({ onApply }: { onApply: (range: number[]) => void }) {
  const [range, setRange] = React.useState([200, 1200])
  return (
    <div className="space-y-2">
      <p className="text-sm tabular-nums">Price: {range[0]} to {range[1]}</p>
      <RangeSlider
        aria-label="Price range"
        min={0}
        max={2000}
        step={50}
        value={range}
        onValueChange={setRange}
        onValueCommitted={onApply}
        format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
      />
    </div>
  )
}

Use onValueChange for live text and onValueCommitted for the expensive part, such as refetching results, so dragging does not fire a request per pixel; that is a form of debouncing. marks adds ticks under the rail, and minStepsBetweenValues keeps the thumbs apart. Range sliders usually live in a FilterBar or FacetFilter in the forms category.