7+ Tailwind CSS Range Slider Components

Begin using the range component to enable users to select a number between 1 and 100 by horizontally sliding the form control. Explore its multiple options for seamless interaction.

AI Agents, AI Video Generators and the App Builder — get full access from $29/month.

AI App Builder

AI App Builder

Describe your idea and Creative Tim AI ships a real, deployed app in minutes.
OpenClaw AI Agent

OpenClaw AI Agent

1-click deploy your personal AI assistant with integrations, code execution and Claude models.
Hermes Agent

Hermes Agent

Deploy a persistent, autonomous AI agent with built-in memory, tools and skills.
AI Video Generator

AI Video Generator

Turn one product photo into a full content pack, images and a short video.
All Accordions Alerts Alpinejs Avatars Badges Banner Blockquote Bottom Navigation Breadcrumb Button Group Buttons Calendar Cards Carousel Charts Chat Checkbox Chip Collapse Cursor Dashboard Datepicker Device Mockups Drawer Dropdowns Faq Features File Upload Floating Label Footers Forms Gallery Grid Headers Headings Hr Icons Images Indicators Inputs Jumbotron Kbd Kit Layout Links List Logins Masonry Mega Menu Menu Modals Music Player Navbars Navigations Number Input Pages Pagination Paragraphs Popover Pricing Progress Radio Button Range Slider Rating Scrollbar Search bar Selects Shadows Sidebar Skeleton Slider Speed dial Spinner Stepper Switch Tables Tabs Testimonials Text Textarea Timeline Toast Toggle Tooltip Typography Video Widget
Notus Design System Pro image

Notus Design System Pro

Creative Tim Premium

$69

Start your development with a premium UI Kit and Admin components library for Tailwind CSS. Let Notus PRO amaze you with its cool features and build tools that will get your project to a whole new level!

Creative Tim UI

Integrate them in v0, Loveble, Claude or in your projects.

tailwind Updated Date Range Picker with Tailwind and Alpine JS
geechartier
Updated Date Range Picker with Tailwind and Alpine JS geechartier
2.2
9
tailwind Date Range Picker with Tailwind and Alpine JS
geechartier
Date Range Picker with Tailwind and Alpine JS geechartier
2.2
9
tailwind Tailwind CSS Multi Range Slider with Alpine.js
zoparga
Tailwind CSS Multi Range Slider with Alpine.js zoparga

Forked

3.3
8
tailwind Multi Range Slider with Alpine.js
t7team
Multi Range Slider with Alpine.js t7team
3.3
10
tailwind Tailwind CSS Range slider
haynajjar
Tailwind CSS Range slider haynajjar
3.3
13
tailwind Custom input range
Astro_Corp
Custom input range Astro_Corp
3.3
7
tailwind Range
TonyCampa
Range TonyCampa
3.3
2