Detent Slider
A slider on a ruler. Ticks swell under the needle, the value rolls like an odometer, and the thumb clicks into detents.
$149 once · every Pro piece
Customize
Arrows step, Shift+arrow jumps detent to detent.
Install
npx shadcn@latest add @obsyde/detent-sliderNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { DetentSlider } from '@/components/obsyde/ember/detent-slider/DetentSlider';
export function Example() {
return (
<DetentSlider defaultValue={40} />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/detent-slider/DetentSlider.tsxcomponentember/detent-slider/detent-slider.cssstylesember/detent-slider/DetentSliderDemo.tsxdemoember/shared/accent.tssharedember/shared/spring.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
valueValue | number | 40 |
minMin | number | 0 |
maxMax | number | 100 |
stepStep | number | 1 |
detentEveryDetent every | number | 25 |
unitUnit | string | '%' |
disabledDisabled | boolean | false |