Range Slider

A slider with two thumbs for choosing a range, such as a price band. Each thumb drags on its own and can never cross the other, values snap to step, a bubble shows the value above the thumb you hold, and tapping the bare track moves the nearest thumb. Both thumbs are adjustable controls for screen readers. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add range-slider

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/range-slider.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { RangeSlider } from "@/components/ui/range-slider";

export default function Example() {
  const [price, setPrice] = useState<[number, number]>([100, 300]);

  return (
    <RangeSlider
      label="Price"
      value={price}
      onValueChange={setPrice}
      min={0}
      max={500}
      step={5}
      format={(value) => `$${value}`}
    />
  );
}

Props