> ## 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.

# Slider

> A slider component for selecting numeric values within a range

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

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

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

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

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

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

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

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

## Overview

The Slider component provides a draggable slider for selecting numeric values within a specified range, with support for keyboard navigation and custom formatting.

## Basic Usage

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

    export default function App() {
      const [value, setValue] = useState(50);

      return (
        <Slider
          value={value}
          onValueChange={setValue}
          min={0}
          max={100}
        />
      );
    }
    ```
  </Tab>

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

## With Labels

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

    export default function VolumeSlider() {
      return (
        <Slider
          label="Volume"
          min={0}
          max={100}
          defaultValue={50}
          formatValue={(value) => `${value}%`}
        />
      );
    }
    ```
  </Tab>

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

## Custom Ranges

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

    export default function CustomRanges() {
      return (
        <div className="space-y-4">
          <Slider
            label="Temperature"
            min={-10}
            max={40}
            defaultValue={20}
            formatValue={(value) => `${value}°C`}
          />

          <Slider
            label="Price Range"
            min={0}
            max={1000}
            defaultValue={500}
            step={50}
            formatValue={(value) => `$${value}`}
          />
        </div>
      );
    }
    ```
  </Tab>

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

## Without Value Display

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

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

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

## Disabled State

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

    export default function DisabledSlider() {
      return (
        <Slider
          label="Disabled Slider"
          min={0}
          max={100}
          defaultValue={30}
          disabled
        />
      );
    }
    ```
  </Tab>

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

## Props

| Prop           | Type                        | Default                      | Description                  |
| :------------- | :-------------------------- | :--------------------------- | :--------------------------- |
| value          | `number`                    | —                            | Current value (controlled)   |
| defaultValue   | `number`                    | `0`                          | Default value (uncontrolled) |
| onValueChange  | `(value: 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 value           |
| 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

### Volume Control

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

    function VolumeControl() {
      const [volume, setVolume] = useState(75);

      return (
        <div className="space-y-2">
          <Slider
            label="Volume"
            value={volume}
            onValueChange={setVolume}
            min={0}
            max={100}
            formatValue={(value) => `${Math.round(value)}%`}
          />

          <div className="flex justify-between text-sm text-gray-600">
            <span>Mute</span>
            <span>Max</span>
          </div>
        </div>
      );
    }

    export default VolumeControl;
    ```
  </Tab>

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

### Temperature Control

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

    function TemperatureControl() {
      const [temperature, setTemperature] = useState(22);

      const getTemperatureColor = (temp: number) => {
        if (temp < 10) return 'text-blue-600';
        if (temp < 20) return 'text-green-600';
        if (temp < 30) return 'text-yellow-600';
        return 'text-red-600';
      };

      return (
        <div className="space-y-4">
          <Slider
            label="Temperature"
            value={temperature}
            onValueChange={setTemperature}
            min={5}
            max={35}
            step={0.5}
            formatValue={(value) => `${value.toFixed(1)}°C`}
          />

          <div className={`text-center text-lg font-medium ${getTemperatureColor(temperature)}`}>
            Current: {temperature.toFixed(1)}°C
          </div>
        </div>
      );
    }

    export default TemperatureControl;
    ```
  </Tab>

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