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

625

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

2 years ago

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

Author:
Alok

2 years ago

11.3k
Simple range slider

Author:
Nour Haider

1 year ago

14.3k
pricing slider with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

11 months ago

2k
bardui.com feedback modal
feedback form will be engaging and user-friendly. Ideal for collecting valuable user opinions and improving your website’s interaction. Explore practical examples and templates for seamless integration.

Author:
Muhammad Imran

6 months ago

1.1k
Float Input

Author:
Maxim

1 year ago

3.6k
Search input asasasas
sasasasasas

Author:
Notify ahmedabad

7 months ago

898
Custom Carosel

Author:
Md. Tofayel islam

7 months ago

1.9k
Comment section

Author:
Manuela Bianka

2 years ago

10.6k
Simple OTP box Form
A Simple OTP form with full responsiveness && dark mode supported

Author:
Shariar Hasan

1 year ago

2.2k
Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

Author:
ABDO-SY

3 weeks ago

135
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

10 months ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components