Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Large/Thick Slider
Large thick slider with increased thumb and track size using data-slot selectors for enhanced visibility and touch targets
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
When your slider is buried on a busy page or needs to work on tablets—make it bigger. This React slider increases thumb size to 24px and track height to 12px using data-slot selectors for precise component part targeting. Built with shadcn/ui Slider and Tailwind arbitrary variants, the larger sizes improve touch target accessibility and visual prominence—perfect for mobile-first designs, accessibility-focused interfaces, touch kiosks, presentation mode controls, or any interface where sliders compete for attention or need generous touch areas for motor-impaired users.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Minimal Style
Minimalist slider with border styling
Standard Slider
Default sized slider component
Colored Slider
Custom colored slider styling
With Tooltip
Slider with value tooltip display
Standard Button
Button with size variants
With Increment Buttons
Slider with plus/minus controls