/

Featured Newest Authors Libraries

Marketing Blocks

Announcements71 ASCII ArtNew Backgrounds365 Borders111 Calls to Action501 Clients17 Comparisons31 Docks49 FAQs191 Features318 Footers65 Galleries272 GradientsNew Heroes1152 Hooks51 Images428 Maps51 Marquees113 Navigation Menus477 Pricing Sections216 Scroll Areas293 ShadersNew Stats & KPIs153 Steppers124 Team Sections119 Testimonials161 Texts663 Timelines74 Videos162

UI Components

Accordions234 AI Chats248 Alerts240 Avatars597 Badges605 Buttons2043 Calendars239 Cards1780 Carousels239 Charts & Data Viz246 Checkboxes238 Cursors152 Dashboards400 Date Pickers250 Dialogs / Modals328 Dropdowns506 Empty States77 File Trees61 File Uploads154 Forms1522 Globes41 Grids & Bento620 Icons851 Inputs949 Links354 Lists349 Menus287 Notifications247 Numbers54 Onboarding53 Paginations130 Popovers179 Profiles270 Progress375 Radio Groups152 Search Bars218 Selects316 Sidebars95 Sign Ins103 Sign ups58 Sliders217 Spinner Loaders480 Tables313 Tabs239 Tags74 Text Areas187 Toasts79 Toggles532 Tooltips267

Components

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

RecommendedMost downloadedMost bookmarkedNewest

Filter

/range

Range Components for React & Next.js

Add intuitive sliders to your Next.js projects with 6 Range components crafted for React and Tailwind CSS.

Input
by Origin UI
Calendar [React Day Picker]
by Origin UI
Calendar [React Day Picker]
by Origin UI
Calendar [React Day Picker]
by Origin UI
Calendar [React Day Picker]
by Origin UI

Slider — Range component for React & Tailwind by Origin UI

Slider

by Origin UI

Slider — Range component for React & Tailwind by Origin UI

Slider

Slider — Range component for React & Tailwind by Origin UI

Slider

Slider — Range component for React & Tailwind by Origin UI

Slider

Slider — Range component for React & Tailwind by Origin UI

Slider

Calendar — Range component for React & Tailwind by tigran tumasov

Calendar

by tigran tumasov

Calendar — Range component for React & Tailwind by tigran tumasov

Calendar

by tigran tumasov

Calendar — Range component for React & Tailwind by tigran tumasov

Calendar

by tigran tumasov

Calendar — Range component for React & Tailwind by tigran tumasov

Calendar

by tigran tumasov

Calendar — Range component for React & Tailwind by tigran tumasov

Calendar

by tigran tumasov

Calendar — Range component for React & Tailwind by tigran tumasov

Calendar

by tigran tumasov

Calendar — Range component for React & Tailwind by tigran tumasov

Calendar

by tigran tumasov

Calendar [React-Area] — Range component for React & Tailwind by Origin UI

Calendar [React-Area]

Calendar [React-Area] — Range component for React & Tailwind by Origin UI

Calendar [React-Area]

Date Range Picker [react-aria-components] — Range component for React & Tailwind by James Shopland

Date Range Picker [react-aria-components]

by James Shopland

Calendar — Range component for React & Tailwind by coss

Calendar

Calendar With Presets — Range component for React & Tailwind by Ruixen UI

Calendar With Presets

Range selection calendar — Range component for React & Tailwind by shadcn

Range selection calendar

Calendar — Range component for React & Tailwind by ShadcnStudio

Calendar

by ShadcnStudio

Calendar — Range component for React & Tailwind by ShadcnStudio

Calendar

by ShadcnStudio

Calendar — Range component for React & Tailwind by ShadcnStudio

Calendar

by ShadcnStudio

Calendar — Range component for React & Tailwind by ShadcnStudio

Calendar

by ShadcnStudio

Calendar — Range component for React & Tailwind by ShadcnStudio

Calendar

by ShadcnStudio

Calendar — Range component for React & Tailwind by ShadcnStudio

Calendar

by ShadcnStudio

Dropdown Range Date Picker — Range component for React & Tailwind by Ruixen UI

Dropdown Range Date Picker

DateRangePicker — Range component for React & Tailwind by Hero Ui

DateRangePicker

Slider — Range component for React & Tailwind by shadcn

Slider

Calendar — Range component for React & Tailwind by Abraham

Calendar

Calendar — Range component for React & Tailwind by Abraham

Calendar

Multiple months range — Range component for React & Tailwind by shadcn

Multiple months range

DateRangePicker — Range component for React & Tailwind by Hero Ui

DateRangePicker

DateRangePicker — Range component for React & Tailwind by Hero Ui

DateRangePicker

DateRangePicker — Range component for React & Tailwind by Hero Ui

DateRangePicker

DateRangePicker — Range component for React & Tailwind by Hero Ui

DateRangePicker

Calendar with little-date — Range component for React & Tailwind by shadcn

Calendar with little-date

Range Calendar [react-aria-components] — Range component for React & Tailwind by James Shopland

Range Calendar [react-aria-components]

by James Shopland

Dual Range Slider — Range component for React & Tailwind by Arihant jain

Dual Range Slider

by Arihant jain

Calendar with range selection — Range component for React & Tailwind by shadcn

Calendar with range selection

HeroUI Color Slider — Range component for React & Tailwind by Hero Ui

HeroUI Color Slider

HeroUI Color Slider — Range component for React & Tailwind by Hero Ui

HeroUI Color Slider

HeroUI Color Slider — Range component for React & Tailwind by Hero Ui

HeroUI Color Slider

useSliderWithInput — Range component for React & Tailwind by Origin UI

useSliderWithInput

Slider — Range component for React & Tailwind by jshguo

Slider

Universal Date Picker — Range component for React & Tailwind by Ruixen UI

Universal Date Picker

Multi Month Calendar — Range component for React & Tailwind by Ruixen UI

Multi Month Calendar

Range selection calendar with min. — Range component for React & Tailwind by shadcn

Range selection calendar with min.

Slider [react-aria-components] — Range component for React & Tailwind by James Shopland

Slider [react-aria-components]

by James Shopland

Calendar with localisation — Range component for React & Tailwind by shadcn

Calendar with localisation

Slider — Range component for React & Tailwind by coss

Slider

Slider — Range component for React & Tailwind by coss

Slider

Slider — Range component for React & Tailwind by coss

Slider

Slider — Range component for React & Tailwind by coss

Slider

HeroUI Slider — Range component for React & Tailwind by Hero Ui

HeroUI Slider

Pill Calendar — Range component for React & Tailwind by Ruixen UI

Pill Calendar

Slider — Range component for React & Tailwind by micka_design

Slider

by micka_design

Calendar Date & Time range — Range component for React & Tailwind by shadcn

Calendar Date & Time range

Slider — Range component for React & Tailwind by jshguo

Slider

Slider — Range component for React & Tailwind by Sean Hello

Slider

Calendar with start end month — Range component for React & Tailwind by shadcn

Calendar with start end month

Range Slider — Range component for React & Tailwind by Awanish Verma

Range Slider

by Awanish Verma

Slider — Range component for React & Tailwind by Sean Hello

Slider

Slider — Range component for React & Tailwind by Sean Hello

Slider

Calendar — Range component for React & Tailwind by SubframeApp

Calendar

Calendar day picker — Range component for React & Tailwind by shadcn

Calendar day picker

Calendar with disabled weekends — Range component for React & Tailwind by shadcn

Calendar with disabled weekends

HeroUI Slider — Range component for React & Tailwind by Hero Ui

HeroUI Slider

Slider — Range component for React & Tailwind by tigran tumasov

Slider

by tigran tumasov

Basic Slider — Range component for React & Tailwind by Abraham

Basic Slider

Range Slider Input — Range component for React & Tailwind by Ruixen UI

Range Slider Input

Range Calendar — Range component for React & Tailwind by Hero Ui

Range Calendar

Slider — Range component for React & Tailwind by tigran tumasov

Slider

by tigran tumasov

Range Calendar — Range component for React & Tailwind by Hero Ui

Range Calendar

Reshaped Calendar — Range component for React & Tailwind by reshaped

Reshaped Calendar

Reshaped Calendar — Range component for React & Tailwind by reshaped

Reshaped Calendar

Reshaped Calendar — Range component for React & Tailwind by reshaped

Reshaped Calendar

Range Calendar — Range component for React & Tailwind by Hero Ui

Range Calendar

Range Calendar — Range component for React & Tailwind by Hero Ui

Range Calendar

Range Calendar — Range component for React & Tailwind by Hero Ui

Range Calendar

Range Calendar — Range component for React & Tailwind by Hero Ui

Range Calendar

Range Calendar — Range component for React & Tailwind by Hero Ui

Range Calendar

Range Calendar — Range component for React & Tailwind by Hero Ui

Range Calendar

Range Calendar — Range component for React & Tailwind by Hero Ui

Range Calendar

Reshaped Slider — Range component for React & Tailwind by reshaped

Reshaped Slider

Reshaped Slider — Range component for React & Tailwind by reshaped

Reshaped Slider

Reshaped Slider — Range component for React & Tailwind by reshaped

Reshaped Slider

Reshaped Slider — Range component for React & Tailwind by reshaped

Reshaped Slider