> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Range Slider

> A dual-handle slider component for selecting a range of values

export const RangeSliderWithoutValuePreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/RangeSliderWithoutValue" frameBorder="0" width="100%" height="220"></iframe>;
};

export const RangeSliderWithLabelsPreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/RangeSliderWithLabels" frameBorder="0" width="100%" height="240"></iframe>;
};

export const RangeSliderPriceFilterPreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/RangeSliderPriceFilter" frameBorder="0" width="100%" height="300"></iframe>;
};

export const RangeSliderFilterComponentPreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/RangeSliderFilterComponent" frameBorder="0" width="100%" height="420"></iframe>;
};

export const RangeSliderDisabledPreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/RangeSliderDisabled" frameBorder="0" width="100%" height="240"></iframe>;
};

export const RangeSliderDateRangePickerPreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/RangeSliderDateRangePicker" frameBorder="0" width="100%" height="280"></iframe>;
};

export const RangeSliderCustomRangesPreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/RangeSliderCustomRanges" frameBorder="0" width="100%" height="320"></iframe>;
};

export const RangeSliderBasicPreview = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/RangeSliderBasicExample" frameBorder="0" width="100%" height="220"></iframe>;
};

## Overview

The RangeSlider component provides a dual-handle slider for selecting a range of values within a specified min/max range.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from "react";
    import { RangeSlider } from '@peppermint-design/devreadykit-custom';

    export default function App() {
      const [range, setRange] = useState([20, 80]);

      return (
        <RangeSlider
          value={range}
          onValueChange={setRange}
          min={0}
          max={100}
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <RangeSliderBasicPreview />
  </Tab>
</Tabs>

## With Labels

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { RangeSlider } from '@peppermint-design/devreadykit-custom';

    export default function PriceRange() {
      return (
        <RangeSlider 
          label="Price Range"
          min={0}
          max={1000}
          defaultValue={[100, 500]}
          formatValue={(value) => `$${value}`}
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <RangeSliderWithLabelsPreview />
  </Tab>
</Tabs>

## Custom Ranges

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { RangeSlider } from '@peppermint-design/devreadykit-custom';

    export default function CustomRanges() {
      return (
        <div className="space-y-4">
          <RangeSlider 
            label="Temperature Range"
            min={-20}
            max={50}
            defaultValue={[10, 30]}
            step={5}
            formatValue={(value) => `${value}°C`}
          />

          <RangeSlider 
            label="Age Range"
            min={18}
            max={100}
            defaultValue={[25, 65]}
            step={1}
            formatValue={(value) => `${value} years`}
          />
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <RangeSliderCustomRangesPreview />
  </Tab>
</Tabs>

## Without Value Display

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { RangeSlider } from '@peppermint-design/devreadykit-custom';

    export default function VolumeRange() {
      return (
        <RangeSlider 
          label="Volume Range"
          min={0}
          max={100}
          showValue={false}
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <RangeSliderWithoutValuePreview />
  </Tab>
</Tabs>

## Disabled State

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { RangeSlider } from '@peppermint-design/devreadykit-custom';

    export default function DisabledRange() {
      return (
        <RangeSlider 
          label="Disabled Range"
          min={0}
          max={100}
          defaultValue={[30, 70]}
          disabled
        />
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <RangeSliderDisabledPreview />
  </Tab>
</Tabs>

## Props

| Prop           | Type                                | Default                      | Description                  |
| :------------- | :---------------------------------- | :--------------------------- | :--------------------------- |
| value          | `[number, number]`                  | —                            | Current range (controlled)   |
| defaultValue   | `[number, number]`                  | `[20, 80]`                   | Default range (uncontrolled) |
| onValueChange  | `(value: [number, number]) => void` | —                            | Change handler               |
| min            | `number`                            | `0`                          | Minimum value                |
| max            | `number`                            | `100`                        | Maximum value                |
| step           | `number`                            | `1`                          | Step increment               |
| disabled       | `boolean`                           | `false`                      | Disabled state               |
| showValue      | `boolean`                           | `true`                       | Show current values          |
| formatValue    | `(value: number) => string`         | `(v) => Math.round(v) + '%'` | Value formatter              |
| label          | `React.ReactNode`                   | —                            | Label content                |
| className      | `string`                            | —                            | Additional CSS classes       |
| trackClassName | `string`                            | —                            | Track CSS classes            |

## Examples

### Price Filter

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from "react";
    import { RangeSlider } from '@peppermint-design/devreadykit-custom';

    function PriceFilter({ onRangeChange }: { onRangeChange: (range: [number, number]) => void }) {
      const [priceRange, setPriceRange] = useState<[number, number]>([50, 500]);

      return (
        <div className="space-y-4">
          <RangeSlider
            label="Price Range"
            value={priceRange}
            onValueChange={(range) => {
              setPriceRange(range);
              onRangeChange(range);
            }}
            min={0}
            max={1000}
            step={10}
            formatValue={(value) => `$${value}`}
          />
          
          <div className="flex justify-between text-sm text-gray-600">
            <span>Min: ${priceRange[0]}</span>
            <span>Max: ${priceRange[1]}</span>
          </div>
        </div>
      );
    }

    export default PriceFilter;
    ```
  </Tab>

  <Tab title="Preview">
    <RangeSliderPriceFilterPreview />
  </Tab>
</Tabs>

### Date Range Picker

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from "react";
    import { RangeSlider } from '@peppermint-design/devreadykit-custom';

    function DateRangePicker() {
      const [yearRange, setYearRange] = useState<[number, number]>([2020, 2024]);
      
      const formatYear = (year: number) => `${year}`;

      return (
        <div className="space-y-4">
          <RangeSlider
            label="Year Range"
            value={yearRange}
            onValueChange={setYearRange}
            min={1990}
            max={2030}
            step={1}
            formatValue={formatYear}
          />
          
          <div className="text-center">
            <span className="text-lg font-medium">
              {yearRange[0]} - {yearRange[1]}
            </span>
          </div>
        </div>
      );
    }

    export default DateRangePicker;
    ```
  </Tab>

  <Tab title="Preview">
    <RangeSliderDateRangePickerPreview />
  </Tab>
</Tabs>

### Filter Component

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { useState } from "react";
    import { RangeSlider } from '@peppermint-design/devreadykit-custom';

    function ProductFilter() {
      const [filters, setFilters] = useState({
        priceRange: [100, 800],
        ratingRange: [3, 5],
        weightRange: [0.5, 5.0]
      });

      return (
        <div className="space-y-6">
          <RangeSlider
            label="Price Range"
            value={filters.priceRange}
            onValueChange={(range) => setFilters(prev => ({ ...prev, priceRange: range }))}
            min={0}
            max={1000}
            step={25}
            formatValue={(value) => `$${value}`}
          />
          
          <RangeSlider
            label="Rating"
            value={filters.ratingRange}
            onValueChange={(range) => setFilters(prev => ({ ...prev, ratingRange: range }))}
            min={1}
            max={5}
            step={0.1}
            formatValue={(value) => `${value.toFixed(1)}★`}
          />
          
          <RangeSlider
            label="Weight (kg)"
            value={filters.weightRange}
            onValueChange={(range) => setFilters(prev => ({ ...prev, weightRange: range }))}
            min={0}
            max={10}
            step={0.1}
            formatValue={(value) => `${value.toFixed(1)}kg`}
          />
        </div>
      );
    }

    export default ProductFilter;
    ```
  </Tab>

  <Tab title="Preview">
    <RangeSliderFilterComponentPreview />
  </Tab>
</Tabs>