Stepper slider
A number control that's a stepper for small nudges and a slider for big changes. Press − or + to move a step at a time, or drag the number sideways and the stepper stretches into a slider, then folds back when you let go.
Drag the number sideways for a slider
Things to try
- Press + or −. The number moves a step at a time and rolls to its new value.
- Drag the number sideways. The stepper stretches into a slider and the number rides on the thumb in a dark pill. Let go and it folds back into the stepper, the number springing back to the middle.
- Click the number and type one. It's a real number field, kept within the range and to the step.
Install
npx shadcn@latest add https://your-docs-site/r/stepper-slider.jsonDependencies
npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react motionUsage
const [months, setMonths] = useState(6);
<StepperSlider value={months} onValueChange={setMonths} min={3} max={24} step={3} unit="months" label="Months" />Use it anywhere people usually nudge a number but sometimes need a big jump: a quantity, a tip, a number of payments, a duration.
How it works
- One control, two shapes. It's a Base UI Number Field until you drag the number, then a Base UI Slider. Only the control's width changes, so nothing in it stretches, and one value pill springs between the stepper's centre and the thumb.
- The drag starts where you are. The slider takes over relative to where you started dragging, so the thumb begins under the value you already had rather than jumping.
- Built for every input. − and + are buttons with clear labels, the number is a real input you can type in, the slider works with the arrow keys, and pass
stretchedto show it as a slider without dragging.
Quantity stepper
An add-to-cart button that becomes a quantity stepper: the count rolls up and down, and at one the minus becomes a bin, so the next press folds it back into Add.
Promo code
A promo code field on a cinema ticket: apply a code and the field springs down into a green ticket chip with the code and what it's worth, while the discount line opens and the total rolls down. A code that doesn't work shakes the field and says why.