127 Components
Stepper & Slider
InputsSynchronized precision control pairing a thin-track slider and large round thumb with a tactile (− / +) segmented stepper pill.
Display Brightness65%
Step: 5%
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/stepper-slider-control.json"
Props
TypeScript props supported by <StepperSliderControl />.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Display Brightness" | Label displayed above the slider track. |
| value | number | — | Controlled numeric value. |
| defaultValue | number | 65 | Initial value for uncontrolled mode. |
| min | number | 0 | Minimum allowed value. |
| max | number | 100 | Maximum allowed value. |
| step | number | 5 | Step increment for both slider snapping and (− / +) buttons. |
| unit | string | "%" | Unit suffix displayed next to the numeric value. |
| onChange | (value: number) => void | — | Callback fired when the value changes. |
| disabled | boolean | false | Disables both slider and stepper buttons. |
| className | string | — | Additional Tailwind CSS classes for the outer card. |
Key Features
- Thin 6px slider track paired with a prominent 24px circular thumb that scales on pointer drag.
- Segmented (− | +) pill stepper for exact incremental adjustments.
- Supports both controlled (`value`, `onChange`) and uncontrolled (`defaultValue`) modes.
Keyboard & Accessibility
- Exposes WAI-ARIA `role='slider'` with `aria-valuemin`, `aria-valuemax`, and `aria-valuenow`.
- Supports `ArrowLeft`, `ArrowRight`, `ArrowUp`, `ArrowDown`, `Home`, and `End` keys.
- Stepper buttons include descriptive `aria-label` attributes and disabled boundary states.