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.6k

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.1k
Range slider
Range slider with upper limit and lower limit.

Author:
Alok

3 years ago

12.1k
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
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

1 year ago

1.8k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

9 months ago

1.3k
File upload with icon

Author:
Fagundo67

2 years ago

17.5k
Card Slider

Author:
Maxim

8 months ago

1.4k
File upload input section with file preview

Author:
Noob

3 years ago

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

Author:
Conan Hilton

3 years ago

10.8k
Toggle button

Author:
Matthew Chen

2 years ago

12.6k
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components