Docs / Components / Tactile Slider
Tactile Slider
A neomorphic tactile slider component with notched tick markers and a floating inertial rolling odometer percentage badge.
01234567890123456789%
Dependencies
Install the following dependencies to use this component:
1npm install motion clsx tailwind-merge
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add tactile-slider
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | undefined | Controlled numeric value. |
| defaultValue | number | 38 | Default initial value. |
| min | number | 0 | Minimum slider value. |
| max | number | 100 | Maximum slider value. |
| step | number | 1 | Step granularity for value changes. |
| ticks | number | 9 | Number of vertical tick marks spaced across the track. |
| unit | string | '%' | Unit string rendered next to the rolling number badge. |
| showValueBadge | boolean | true | Whether to display the floating rolling percentage badge. |
| onChange | (value: number) => void | undefined | Callback fired when slider value updates. |
| onChangeEnd | (value: number) => void | undefined | Callback fired on drag release. |
| disabled | boolean | false | Disable slider interactions. |
| className | string | '' | Additional CSS classes. |