jelly slider
preview
24
36
48
60
72
84
usage
Choose a default value for an uncontrolled range or provide value and onChange for controlled input.
import { JellySlider } from "@/components/jelly/jelly-slider"
export function VolumeSlider() {
return <JellySlider color="blue" label="volume" defaultValue={65} />
}setup notes
Requires React, TypeScript, Tailwind CSS, and the included cn helper. It uses a native range input underneath the custom surface.
props
| prop | type | default | purpose |
|---|---|---|---|
| color | "pink" | "blue" | "green" | "yellow" | "orange" | "red" | "blue" | Sets the fill and thumb color. |
| min / max | number | 0 / 100 | Sets the selectable range. |
| defaultValue | number | 50 | Sets the uncontrolled initial value. |
| value / onChange | number / (value) => void | - | Controls the current value. |
| showValue | boolean | true | Shows the current number. |