# Range components > Add intuitive sliders to your Next.js projects with 6 Range components crafted for React and Tailwind CSS. 91 components available. Showing the first 60 — browse the rest at https://21st.dev/community/components/s/range. - [Input](https://21st.dev/@originui/components/input/input-with-range.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/range-calendar.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/two-months-calendar.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/three-months-calendar.md) — by Origin UI - [Calendar \[React Day Picker\]](https://21st.dev/@originui/components/calendar/disabled-dates.md) — by Origin UI - [Slider](https://21st.dev/@originui/components/slider/rating-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/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/dual-range-slider.md) — by Origin UI - [Calendar](https://21st.dev/@shugar/components/calendar.md) — by tigran tumasov - [Calendar](https://21st.dev/@shugar/components/calendar/horizontal-layout.md) — by tigran tumasov - [Calendar](https://21st.dev/@shugar/components/calendar/compact.md) — by tigran tumasov - [Calendar](https://21st.dev/@shugar/components/calendar/presets.md) — by tigran tumasov - [Calendar](https://21st.dev/@shugar/components/calendar/min-and-max-dates.md) — by tigran tumasov - [Calendar](https://21st.dev/@shugar/components/calendar/stacked.md) — by tigran tumasov - [Calendar](https://21st.dev/@shugar/components/calendar/presets-with-default-value.md) — by tigran tumasov - [Calendar \[React-Area\]](https://21st.dev/@originui/components/calendar-rac/range-calendar.md) — by Origin UI - [Calendar \[React-Area\]](https://21st.dev/@originui/components/calendar-rac/disabled-dates.md) — by Origin UI - [Date Range Picker \[react-aria-components\]](https://21st.dev/@jolbol1/components/date-range-picker.md) — by James Shopland - [Calendar](https://21st.dev/@coss.com/components/calendar/range.md) — by coss - [Calendar With Presets](https://21st.dev/@ruixen.ui/components/calendar-with-presets.md) — by Ruixen UI - [Range selection calendar](https://21st.dev/@shadcn/components/range-selection-calendar.md) — by shadcn - [Dropdown Range Date Picker](https://21st.dev/@ruixen.ui/components/dropdown-range-date-picker.md) — by Ruixen UI - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-twenty-three.md) — by ShadcnStudio - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-with-range.md) — by ShadcnStudio - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/custom-range-selection-calendar.md) — by ShadcnStudio - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-disabled-weekend.md) — by ShadcnStudio - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-with-minimum-days-selection.md) — by ShadcnStudio - [Calendar](https://21st.dev/@ShadcnStudio/components/calendar-1/calendar-multi-month-with-range-selection.md) — by ShadcnStudio - [DateRangePicker](https://21st.dev/@hero_ui/components/heroui-date-range-picker.md) — by Hero Ui - [Slider](https://21st.dev/@shadcn/components/slider.md) — by shadcn - [Calendar](https://21st.dev/@anubra266/components/calendar-1/unavailable-dates-calendar.md) — by Abraham - [Calendar](https://21st.dev/@anubra266/components/calendar-1/range-calendar.md) — by Abraham - [Multiple months range](https://21st.dev/@shadcn/components/multiple-months-range.md) — by shadcn - [DateRangePicker](https://21st.dev/@hero_ui/components/heroui-date-range-picker/format-options.md) — by Hero Ui - [DateRangePicker](https://21st.dev/@hero_ui/components/heroui-date-range-picker/controlled.md) — by Hero Ui - [Calendar with little-date](https://21st.dev/@shadcn/components/calendar-with-little-date.md) — by shadcn - [DateRangePicker](https://21st.dev/@hero_ui/components/heroui-date-range-picker/international-calendar.md) — by Hero Ui - [DateRangePicker](https://21st.dev/@hero_ui/components/heroui-date-range-picker/form-example.md) — by Hero Ui - [Range Calendar \[react-aria-components\]](https://21st.dev/@jolbol1/components/range-calendar.md) — by James Shopland - [Dual Range Slider](https://21st.dev/@arihantcodes_1f7b8c4d/components/dual-range-slider.md) — by Arihant jain - [Calendar with range selection](https://21st.dev/@shadcn/components/calendar-with-range-selection.md) — by shadcn - [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/rgb-channels.md) — by Hero Ui - [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 - [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 - [Universal Date Picker](https://21st.dev/@ruixen.ui/components/universal-date-picker.md) — by Ruixen UI - [Multi Month Calendar](https://21st.dev/@ruixen.ui/components/multi-month-calendar.md) — by Ruixen UI - [Range selection calendar with min.](https://21st.dev/@shadcn/components/range-selection-calendar-with-min.md) — by shadcn - [Slider \[react-aria-components\]](https://21st.dev/@jolbol1/components/slider.md) — by James Shopland - [Calendar with localisation](https://21st.dev/@shadcn/components/calendar-with-localisation.md) — by shadcn - [Slider](https://21st.dev/@coss.com/components/slider/range.md) — by coss - [Slider](https://21st.dev/@coss.com/components/slider/with-marks.md) — by coss - [Slider](https://21st.dev/@coss.com/components/slider/disabled.md) — by coss - [Slider](https://21st.dev/@coss.com/components/slider/with-label.md) — by coss - [HeroUI Slider](https://21st.dev/@hero_ui/components/heroui-slider.md) — by Hero Ui - [Pill Calendar](https://21st.dev/@ruixen.ui/components/pill-calendar.md) — by Ruixen UI - [Slider](https://21st.dev/@micka_design/components/slider/range.md) — by micka_design Full component directory: https://21st.dev/llms.txt