Skip to main content

​
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

  • Code
  • Preview
import { useState } from "react";
import { Slider } from '@peppermint-design/devreadykit';

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

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

​
With Labels

  • Code
  • Preview
import { Slider } from '@peppermint-design/devreadykit';

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

​
Custom Ranges

  • Code
  • Preview
import { Slider } from '@peppermint-design/devreadykit';

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>
  );
}

​
Without Value Display

  • Code
  • Preview
import { Slider } from '@peppermint-design/devreadykit';

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

​
Disabled State

  • Code
  • Preview
import { Slider } from '@peppermint-design/devreadykit';

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

​
Props

PropTypeDefaultDescription
valuenumber—Current value (controlled)
defaultValuenumber0Default value (uncontrolled)
onValueChange(value: number) => void—Change handler
minnumber0Minimum value
maxnumber100Maximum value
stepnumber1Step increment
disabledbooleanfalseDisabled state
showValuebooleantrueShow current value
formatValue(value: number) => string(v) => Math.round(v) + '%'Value formatter
labelReact.ReactNode—Label content
classNamestring—Additional CSS classes
trackClassNamestring—Track CSS classes

​
Examples

​
Volume Control

  • Code
  • Preview
import { useState } from "react";
import { Slider } from '@peppermint-design/devreadykit';

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;

​
Temperature Control

  • Code
  • Preview
import { useState } from "react";
import { Slider } from '@peppermint-design/devreadykit';

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;
⌘I