127 Components
Kinetic Slider
InputsElastic range slider featuring velocity-reactive tooltip inertia, logarithmic rubber-band boundary over-drag, and full keyboard accessibility.
Spring Tension64%
0%100%
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/kinetic-slider.json"
Props
TypeScript props supported by <KineticSlider />.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Spring Tension" | Accessible label rendered above the slider rail. |
| defaultValue | number | 64 | Initial numeric value for uncontrolled usage. |
| min | number | 0 | Minimum allowed slider value. |
| max | number | 100 | Maximum allowed slider value. |
| step | number | 1 | Numeric increment step size. |
| unit | string | "%" | Unit suffix displayed next to the numeric value. |
| value | number | — | Controlled numeric value for the slider |
| stiffness | number | — | Spring tension for kinetic dragging physics |
| damping | number | — | Spring damping coefficient |
| onChange | (val: number) => void | — | Callback fired when slider value changes |
Key Features
- Real-time drag velocity tracking via Framer Motion useVelocity to tilt the floating value badge.
- Logarithmic rubber-band resistance when dragging past min or max boundaries.
- Tactile thumb squash-and-stretch and dynamic rail thickening on pointer capture.
Keyboard & Accessibility
- Implements full WAI-ARIA role='slider' with aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext.
- Supports ArrowLeft/Right/Up/Down, PageUp/PageDown (10x step), and Home/End keyboard increments.
- Disables velocity rotation and rubber-band displacement when prefers-reduced-motion is enabled.