Tick Slider
A scrubber drawn as a row of tick marks, backed by a real range input.
5.7 KB
•Updated on September 20, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-tick-sliderUsage
Code
import { TickSlider } from '@/components/spaceui/tick-slider'
export default function Example() {
const [value, setValue] = React.useState(24)
return (
<TickSlider
value={value}
onChange={setValue}
min={16}
max={48}
step={1}
majorEvery={8}
unit="px"
fixedPitch
label="Font size"
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Controlled value |
onChange | (next: number) => void | — | Change handler |
min | number | 0 | Minimum |
max | number | 100 | Maximum |
step | number | 1 | Snap |
majorEvery | number | 4 | Every Nth step gets a taller mark |
isMajorMark | (value: number) => boolean | — | Custom predicate for taller marks, overrides majorEvery |
label | string | — | Accessible name — the control carries no visible label |
unit | string | - | Suffix on the value readout |
showValue | boolean | true | Shows the numeric readout on the right |
disabled | boolean | false | Disables the control |
fixedPitch | boolean | false | Sizes the rail from the mark pitch instead of filling the container |
trackClassName | string | — | Overrides the rail's width/class entirely — takes over from fixedPitch |
className | string | — | Class on the outer wrapper |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
Related Components
On This Page