Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Slider - With Increment/Decrement Buttons
Slider with plus/minus buttons and live value display for quantity control with multiple adjustment methods
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Three ways to adjust one value—drag, click, or jump. This React slider uses shadcn/ui Slider flanked by Lucide React icon buttons (MinusIcon and PlusIcon) with live value display. Built with Math.min and Math.max clamping for +10/-10 increments, buttons provide quick jumps while slider allows granular control—perfect for quantity pickers, volume controls with presets, zoom levels, font size adjusters, or any interface where users benefit from both precise dragging and quick increment/decrement buttons for value adjustment.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Synced with Input
Slider with number input field
With Min/Max Labels
Slider with range indicators
Button
Button components
Standard Slider
Basic slider component
Color Picker
Slider for color values
Label
Form label component