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 v3.4. It is responsive.

Input Range Slider

Author SHARIFUL ISLAM

Tailwind v3.4 2.6k 2

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

Alok

4 years ago

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

Alok

4 years ago

13.1k
Simple range slider

Nour Haider

3 years ago

16.4k
pricing slider with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

3.2k
Input field with logo
Logo on the left side of the input field

Conan Hilton

3 years ago

11.6k
Colored checkboxes
use custom accent color according to your design

Pixel Perfect

2 years ago

6.1k
File input field

Lyra Ravensong

3 years ago

14.1k
Large File upload input

Akshay

4 years ago

15.3k
tailwind contact form
tailwind contact form

Geoffrey Callaghan

2 years ago

4k
3D Coverflow Slider — Ambient Background
A depth-based 3D slider with real perspective and rotateY transforms (not just fade), paired with a drifting polyhedra background that responds to cursor movement. Zero dependencies — pure Tailwind utilities, one config file, and vanilla JS. Auto-plays, pauses on hover, fully keyboard/dot-navigable. Swap the color tokens in the config to reskin it.

Azeem warraich

1 month ago

154
Serious Input Html
Input text serious like apple or smth

Cristian

2 years ago

2.8k
Review popup form with toggle and stars
Review popup form with toggle and stars

Ayman Reifoun

1 year ago

1.3k