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

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

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

Author:
Alok

3 years ago

12.5k
Simple range slider

Author:
Nour Haider

2 years ago

15.7k
pricing slider with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.1k
Tailwind CSS Radio Button Cards

Author:
Prashant

3 years ago

12.8k
Serious Input Html
Input text serious like apple or smth

Author:
Cristian

1 year ago

2.5k
Cart with alpinejs and tailwind css
How to add items to your cart with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.7k
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)

10 months ago

1.3k
Maintenance mode

Author:
Maxim

2 years ago

4.3k
Search bar with icon

Author:
Steven Kuhn

3 years ago

15.4k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Author:
Ameth Galarcio

1 year ago

4.3k
File upload form

Author:
Lukas Müller

3 years ago

14.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components