Usage-Based Pricing Slider
Tailwind CSS pricing card with a range slider that updates the plan, monthly price and cost per 1,000 requests as usage changes.
Tag: slider
Components tagged with "slider".
10 components
Card Carousel with Peek of Next Slide
Swipeable Tailwind CSS photo card carousel with scroll snap, a peeking next card, arrow buttons, dots and keyboard support.
3D Coverflow Image Carousel
Coverflow-style image carousel with rotated 3D side photos, reflections, captions, dots, swipe and keyboard navigation in pure CSS and vanilla JS.
Custom Range Slider
Styled range input with a gradient fill, ring thumb and a live value bubble that follows the handle, in pure CSS and a few lines of vanilla JS.
Scroll-Snap Carousel
Native CSS scroll-snap carousel with arrow buttons, synced pill dots and keyboard support, enhanced by a few lines of vanilla JavaScript.
Scroll-Snap Testimonial Slider
Horizontally scrolling testimonial cards using CSS scroll snap, with star ratings, avatars and accessible previous and next buttons.
Carousel with Captions
Bootstrap 5 hero carousel with glass captions, pill indicators, previous and next buttons, a pause control and gradient SVG slides.
Testimonial Carousel
Bootstrap 5 testimonial carousel with serif quote cards, pill indicators, arrow buttons and an accessible pause control.
Dual Range Price Slider
Tailwind CSS min/max price slider with two handles, synced number inputs and a live histogram that counts products in the selected range.
Image Carousel with Thumbnails
Tailwind CSS image carousel with a clickable thumbnail strip, captions, swipe support, arrow-key navigation and optional looping.