# Range Slider components

> Fine-tune values with 3 custom React range slider components, styled with Tailwind CSS for seamless integration into dashboards or forms.

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

- [Slider](https://21st.dev/@originui/components/slider/dual-range-slider.md) — by Origin UI
- [Dual Range Slider](https://21st.dev/@arihantcodes_1f7b8c4d/components/dual-range-slider.md) — by Arihant jain
- [useSliderWithInput](https://21st.dev/@originui/components/use-slider-with-input.md) — by Origin UI
- [BeUI Range Slider](https://21st.dev/@saurabh10102/components/be-ui-range-slider.md) — by Saurabh Chauhan
- [Range Slider](https://21st.dev/@avanishverma4/components/range-slider.md) — by Awanish Verma
- [HeroUI Slider](https://21st.dev/@hero_ui/components/heroui-slider/range.md) — by Hero Ui
- [Range Slider Input](https://21st.dev/@ruixen.ui/components/range-slider-input.md) — by Ruixen UI
- [Reshaped Slider](https://21st.dev/@reshaped/components/reshaped-slider/form-control.md) — by reshaped
- [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/range-calendar-with-presets.md) — by Origin UI
- [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/vertical-dual-range-slider-and-tooltip.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/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-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
- [Dynamic Text Slider](https://21st.dev/@minhxthanh/components/dynamic-text-slider.md) — by Le Thanh
- [Sliding Number](https://21st.dev/@ibelick/components/sliding-number/slider.md) — by Julien Thibeaut
- [Slider Number Flow](https://21st.dev/@barvian/components/slider-number-flow.md) — by Maxwell Barvian
- [Feedback Slider](https://21st.dev/@ln-dev7/components/feedback-slider.md) — by LN
- [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
- [Form](https://21st.dev/@azacdev/components/form/dual-range-slider-form.md) — by shadcn
- [Range Slider](https://21st.dev/@ravikatiyar162/components/range-slider.md) — by Ravi Katiyar
- [Progress Bar](https://21st.dev/@jatin-yadav05/components/progress-bar.md) — by Jatin Yadav
- [Brush](https://21st.dev/@airbnb-visx/components/brush.md) — by Airbnb
- [Slider](https://21st.dev/@shadcn/components/slider.md) — by shadcn
- [Calendar](https://21st.dev/@anubra266/components/calendar-1/calendar-w-range-presets.md) — by Abraham
- [Calendar](https://21st.dev/@anubra266/components/calendar-1/two-months-calendar.md) — by Abraham
- [Calendar](https://21st.dev/@anubra266/components/calendar-1/three-months-calendar.md) — by Abraham
- [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/alpha-channel.md) — by Hero 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/volume.md) — by coss
- [Slider](https://21st.dev/@coss.com/components/slider/vertical.md) — by coss
- [Slider](https://21st.dev/@coss.com/components/slider/range.md) — by coss
- [HeroUI Slider](https://21st.dev/@hero_ui/components/heroui-slider.md) — by Hero Ui
- [Slider](https://21st.dev/@micka_design/components/slider/steps.md) — by micka_design
- [Slider](https://21st.dev/@micka_design/components/slider/range.md) — by micka_design

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