Components
Slider
SketchSlider — a hand-drawn range slider with a sketchy track and spring-animated thumb.
SketchSlider draws a rough.js track and thumb that spring-animate to each new
value. It's fluid — it fills the width of its container, so wrap it to size it.
Supports both uncontrolled use (seed a position with value) and fully controlled
use (supply both value and onChange).
Default
import { SketchSlider } from "blackchalk";<div style={{ width: 320, maxWidth: "100%" }}><SketchSlider value={50} min={0} max={100} /></div>Controlled
import { useState } from "react";import { SketchSlider } from "blackchalk";const [value, setValue] = useState(30);<div style={{ width: 320, maxWidth: "100%" }}><SketchSlider value={value} min={0} max={100} onChange={setValue} /><p style={{ fontFamily: "inherit", marginTop: 8 }}>Value: {value}</p></div>Props
| Prop | Type | Default |
|---|---|---|
value | number | — |
min | number | 0 |
max | number | 100 |
onChange | (value: number) => void | — |
className | string | — |
style | CSSProperties | — |
See it in the Storybook playground, or read the source.