Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Slider - With Preset Values
Slider with preset value buttons for quick selection of common values at 0, 25, 50, 75, and 100 increments
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Custom values are nice but presets are faster—one click to common settings. This React slider uses shadcn/ui Slider with array of preset buttons (0, 25, 50, 75, 100) that call setValue directly. Built with flex-1 buttons for equal width distribution and live value display, preset buttons provide instant jumps to quarter increments while slider handles custom values—perfect for zoom presets, volume levels, opacity quick picks, brightness settings, or any interface where users frequently need common preset values alongside custom slider adjustment.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
With Increment Buttons
Slider with plus/minus controls
Synced with Input
Slider with number input field
Button
Button components
Standard Slider
Basic slider component
Button Group
Grouped button controls
Label
Form label component