Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Slider - Percentage Range
A percentage range slider with step increments and percent-formatted values showing range boundaries at 0% and 100%
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Percentages need coarse steps—5 percent increments feel natural! This React range slider uses step prop for discrete jumps with percentage formatting. Built with shadcn/ui Slider and boundary labels showing 0 percent and 100 percent, the stepped range prevents tiny adjustments—perfect for confidence intervals, progress ranges, allocation percentages, probability ranges, or any percentage-based selection where precision isn't needed and chunked increments improve usability.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic Range Slider
Simple range without step or formatting
Price Range Slider
Range with dollar formatting
Range with Value Display
Compact range with inline values
Range with Constraints
Range with minimum gap enforcement
Slider with Steps
Single slider with step increments
Progress
Progress bar component
Questions you might have
React Slider - Range with Constraints
A constrained range slider that enforces minimum gap between handles preventing them from getting too close together
React Slider - Volume Control
A volume control slider with speaker icon and percentage display for adjusting audio levels in media players or settings