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-custom';
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-custom';
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-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>
);
}
Without Value Display
- Code
- Preview
import { Slider } from '@peppermint-design/devreadykit-custom';
export default function VolumeWithoutValue() {
return (
<Slider
label="Volume"
min={0}
max={100}
showValue={false}
/>
);
}
Disabled State
- Code
- Preview
import { Slider } from '@peppermint-design/devreadykit-custom';
export default function DisabledSlider() {
return (
<Slider
label="Disabled Slider"
min={0}
max={100}
defaultValue={30}
disabled
/>
);
}
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
- Code
- Preview
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;
Temperature Control
- Code
- Preview
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;