Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Slider - Speed Control
A speed control slider with discrete labeled steps showing text labels instead of numeric values for qualitative settings
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Speed is qualitative—Slow, Fast, Very Fast! This React speed slider uses discrete steps with string label array indexed by value. Built with shadcn/ui Slider with step 1 and max 3, the text-based levels feel more natural—perfect for playback speed, animation speed, typing speed, scrolling speed, or any speed control where relative labels are clearer than abstract numbers and make adjustments feel less technical.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Volume Control
Volume slider with percentage display
Brightness Control
Brightness slider with yellow styling
Temperature Control
Temperature slider with gradient
Percentage Range
Range slider with step increments
Slider with Steps
Standard slider with step markers
Select
Dropdown select component