Range Slider

A dual-thumb range slider component that allows users to select a range of values between a minimum and maximum. Perfect for price ranges, date ranges, and filtering.

Default Usage

import { RangeSlider } from "@/components/ui/RangeSlider";
import { Label } from "@/components/ui/Label";

import { useState } from "react";

export const DefaultRangeSliderExample = () => {
  const [value, setValue] = useState<[number, number]>([25, 75]);

  return (
     <div className="w-full max-w-md space-y-2 flex flex-col">
        <Label>
          Price Range: 25 - 75
        </Label>
        <RangeSlider
          value={value}
          onChange={setValue}
          min={0}
          max={100}
          step={1}
        />
      </div>
  );
};

Props

Features

• Dual Thumbs: Independent control of minimum and maximum values
• Smart Constraints: Prevents thumbs from crossing over each other
• Smooth Interaction: Responsive drag behavior with hover effects
• Click to Set: Click anywhere on the track to move the nearest thumb
• Accessible: Full keyboard navigation and screen reader support
• Dark Mode Ready: Adapts to light and dark themes using design tokens