Home
SHARIFUL ISLAM
Multi Range Slider

Multi Range Slider

Adjust the sliders to set your preferred price range. The left slider sets the minimum price, and the right slider sets the maximum price. The selected range is displayed below the sliders in real-time, allowing you to easily filter products within your budget.

This tailwind example is contributed by SHARIFUL ISLAM, on 16-Feb-2025. Component is made with Tailwind CSS v3. It is responsive.

Input Range Slider

Author SHARIFUL ISLAM

1.5k

Fork Fullscreen

/* Custom track (hidden default) */
        input[type="range"]::-webkit-slider-runnable-track {
            height: 2px;
        }

/* Custom thumb styling (Centered) */
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            background: white;
            border: 3px solid #23a9f7;
            border-radius: 50%;
            cursor: pointer;
            pointer-events: auto;
            position: relative;
            z-index: 3;
            transform: translateY(-30%);
        }

input[type="range"]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            background: white;
            border: 3px solid #23a9f7;
            border-radius: 50%;
            cursor: pointer;
            pointer-events: auto;
            z-index: 3;
            transform: translateY(-30%);
        }

/* Centering the range input itself */
        .slider-container {
            position: relative;
            height: 18px; /* Adjust height to fit thumb */
        }
    </style>
</head>
<body class="flex justify-center items-center min-h-screen bg-gray-100">
    <div class="w-[400px] bg-white p-6 rounded-lg shadow-lg">
        <h2 class="text-lg font-bold">PRICE RANGE</h2>
        
        <div class="relative mt-4 slider-container">
            
            <input type="range" id="minRange" min="0" max="400" value="0">
            <input type="range" id="maxRange" min="0" max="400" value="400">
            
            
            <div class="relative w-full h-2 bg-gray-200 rounded-md">
                <div id="rangeTrack" class="absolute h-2 bg-gradient-to-r from-blue-900 to-blue-400 rounded-md"></div>
            </div>
        </div>
        
        <div class="flex justify-between mt-3 text-gray-600">
            <span>Min Price: $<span id="minValue">0</span></span>
            <span>Max Price: $<span id="maxValue">400</span></span>
        </div>
    </div>
    
    <script>
        const minRange = document.getElementById("minRange");
        const maxRange = document.getElementById("maxRange");
        const minValue = document.getElementById("minValue");
        const maxValue = document.getElementById("maxValue");
        const rangeTrack = document.getElementById("rangeTrack");
        const minGap = 10;

function updateRange() {
            let min = parseInt(minRange.value);
            let max = parseInt(maxRange.value);

// Ensure min & max have a gap of at least `minGap`
            if (max - min < minGap) {
                if (event.target === minRange) {
                    minRange.value = max - minGap;
                } else {
                    maxRange.value = min + minGap;
                }
            }

minValue.innerText = minRange.value;
            maxValue.innerText = maxRange.value;

let minPercent = (minRange.value / 400) * 100;
            let maxPercent = (maxRange.value / 400) * 100;
            rangeTrack.style.left = minPercent + "%";
            rangeTrack.style.right = 100 - maxPercent + "%";
        }

// Event listeners for input changes
        minRange.addEventListener("input", updateRange);
        maxRange.addEventListener("input", updateRange);

updateRange(); // Initialize the UI on load
    </script>
</body>

Related Examples

Range Slider

Author:
Alok

3 years ago

13.8k
Range slider
Range slider with upper limit and lower limit.

Author:
Alok

3 years ago

12k
Simple range slider

Author:
Nour Haider

2 years ago

15.4k
pricing slider with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.5k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

167
Large File upload input

Author:
Akshay

3 years ago

14.5k
Elegant Switches
Useful Tailwind classes for creating several types of basic switches.

Author:
Nick Girga

6 months ago

404
Search input with Tailwind CSS and Alpinejs
How to create a search input with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.8k
Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

1 year ago

4k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

876
Single Input newsletter form

Author:
Task Master

2 years ago

10.4k
Console like input field

Author:
Charlotte Dupont

2 years ago

11.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components