Components
Slider
A hand-drawn range slider with a sketchy track and circle thumb.
40
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/slider.jsonProps
PropTypeDefaultDescription
formatValue(value: number) => string—
Formats the displayed numeric value.
labelstring—
Optional label text shown with the component.
showValuebooleantrueShows the current numeric value in the UI.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
Custom range and format
150
$150
Hide value
Accessibility
Slider uses a native range input underneath the sketch layers, so pointer and keyboard interactions remain intact. Always provide a visible label when the meaning of the numeric range is not obvious from context.
Examples
import { Slider } from "@/components/crumble/ui/slider";
<Slider label="Volume" defaultValue={40} />;