Components
Slider
A continuous or stepped range control for progress, volume, zoom, and adjustable system values.
Loading...
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
1
Install the component
Run the registry command below to add slider to your project.
watermelon add slider2
Import the component
Import Slider from your local UI registry output.
Import
import { Slider } from "@/components/ui/slider";Import
Import
import { Slider } from "@/components/ui/slider";Usage
Use the slider for values that benefit from direct manipulation and immediate feedback.
Loading...
API Reference
| prop | type | default | description |
|---|---|---|---|
| value | number | - | Controls the current slider value. |
| defaultValue | number | min | Sets the initial value for uncontrolled usage. |
| min / max | number | 0 / 100 | Defines the allowed numeric range. |
| step | number | 1 | Snaps values to fixed increments. |