Shadcn.io is not affiliated with official shadcn/ui
Large/Thick Slider
Large thick slider with increased thumb and track size using data-slot selectors for enhanced visibility and touch targets
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.
Large/Thick Slider preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.