Slider
Range selection input with label and value display.
Examples
Default
Multiple Sliders
Multiple sliders in a settings panel.
Without Label
In Card
Slider used within a settings card.
Disabled
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Slider } from "@rokle/components";import { useState } from "react";
import { Slider } from "@rokle/components";
export function Example() {
const [value, setValue] = useState(50);
return (
<div className="max-w-sm">
<Slider label="Volume" value={value} onValueChange={setValue} />
</div>
);
}Source
The implementation source for this component. Copy it into your project and customise.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | Current value. |
| onValueChange | (value: number) => void | - | Called when value changes. |
| label | string | - | Label text. |
| min | number | 0 | Minimum value. |
| max | number | 100 | Maximum value. |