Range Slider
- from @pluginui
Two thumbs on one track for a span such as a note range, on Base UI's Slider. Controlled and told which thumb moved; labels point outward from their thumbs so they cannot collide, and the same formatter feeds aria-valuetext. Thumb hit areas are at least the sm control height (24px, 44 on touch). With keyboard the 24px piano strip is the track: one equal column per note, bar thumbs drawn on it, labels inline beside them, the range tinted with the value fill, pressing a key moves the nearer thumb, Shift+arrow jumps an octave.
Install
New to shadcn? Set up your project
If your project already has a shadcn components.json, skip initialization. Otherwise, run this once from your project root.
pnpm dlx shadcn@latest initpnpm dlx shadcn@latest add @pluginui/core-range-sliderLive preview
No live preview has been built for this component yet.
Registry dependencies0
The CLI adds no other registry items with this one.
Packages0
No npm packages are installed with it.