# Slider components

> Present content interactively with 26 slider components for React and Tailwind CSS, designed to fit smoothly into Next.js projects.

186 components available. Showing the first 60 — browse the rest at https://21st.dev/community/components/s/slider.

- [image auto slider](https://21st.dev/@waleedkibhen/components/image-auto-slider.md) — by wisedev
- [Image Comparison Slider](https://21st.dev/@minhxthanh/components/image-comparison-slider.md) — by Le Thanh
- [Slider](https://21st.dev/@originui/components/slider.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/slider-with-plus-munis.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/price-slider-with-min-max.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/slider-with-ticks.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/multiple-vertical-sliders.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/vertical-slider.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/slider-with-tiny-thumb.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/rating-slider.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/temperature-slider.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/vertical-dual-range-slider-and-tooltip.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/rating-slider-2.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/multiple-sliders-with-reset-button.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/price-slider.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/slider-with-labels-and-tooltip.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/dual-range-slider-with-output.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/slider-with-output.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/slider-with-input.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/slider-with-square-thumb.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/volume-slider.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/dual-range-slider.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/dual-range-slider-with-input.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/slider-with-reference-labels.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/slider-with-solid-thumb.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/slider-with-multiple-thumbs.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/slider-with-labels.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/vertical-slider-with-input.md) — by Origin UI
- [Slider](https://21st.dev/@originui/components/slider/disabled-slider.md) — by Origin UI
- [Compare](https://21st.dev/@manuarora700/components/compare.md) — by Manu Arora
- [Lightning Split](https://21st.dev/@cinquinandy/components/lightning-split.md) — by Cinquin Andy
- [Images Slider](https://21st.dev/@manuarora700/components/images-slider.md) — by Manu Arora
- [Image Slider](https://21st.dev/@ravikatiyar162/components/image-slider.md) — by Ravi Katiyar
- [Image Comparison Slider (Horizontal)](https://21st.dev/@ravikatiyar162/components/image-comparison-slider-horizontal.md) — by Ravi Katiyar
- [Infinite slider horizontal](https://21st.dev/@kaif-ui/components/infinite-slider-horizontal.md) — by Kaif UI
- [Slider Number Flow](https://21st.dev/@barvian/components/slider-number-flow.md) — by Maxwell Barvian
- [PricingSlider Loops](https://21st.dev/@radu/components/pricing-slider-loops.md) — by Radu Popescu
- [SnappySlider](https://21st.dev/@ghcpuman902/components/snappy-slider.md) — by MangleKuo
- [Image Player](https://21st.dev/@youcefbnm/components/image-player.md) — by YoucefBnm Bnm
- [Image Swiper](https://21st.dev/@lukacho/components/image-swiper.md) — by lukacho/ui
- [Range Slider](https://21st.dev/@ravikatiyar162/components/range-slider.md) — by Ravi Katiyar
- [Slider](https://21st.dev/@shadcn/components/slider.md) — by shadcn
- [Dual Range Slider](https://21st.dev/@arihantcodes_1f7b8c4d/components/dual-range-slider.md) — by Arihant jain
- [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider.md) — by Hero Ui
- [Image Comparison Slider Vertical](https://21st.dev/@ravikatiyar162/components/image-comparison-slider-vertical.md) — by Ravi Katiyar
- [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/hsl-channels.md) — by Hero Ui
- [Slider](https://21st.dev/@builduilabs/components/slider.md) — by Build UI
- [Volume Component](https://21st.dev/@moumensoliman/components/volume-component-shadcnui.md) — by Moumen Soliman
- [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/vertical.md) — by Hero Ui
- [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/custom-render-function.md) — by Hero Ui
- [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/alpha-channel.md) — by Hero Ui
- [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/disabled.md) — by Hero Ui
- [useSliderWithInput](https://21st.dev/@originui/components/use-slider-with-input.md) — by Origin UI
- [Slider](https://21st.dev/@jshguo/components/interfaces-slider.md) — by jshguo
- [Slider](https://21st.dev/@coss.com/components/slider.md) — by coss
- [Slider](https://21st.dev/@coss.com/components/slider/equalizer.md) — by coss
- [Slider \[react-aria-components\]](https://21st.dev/@jolbol1/components/slider.md) — by James Shopland
- [Slider](https://21st.dev/@coss.com/components/slider/with-ticks.md) — by coss
- [Slider](https://21st.dev/@micka_design/components/slider.md) — by micka_design
- [Slider](https://21st.dev/@coss.com/components/slider/rating.md) — by coss

Full component directory: https://21st.dev/llms.txt