Untitled
unknown
plain_text
5 months ago
6.5 kB
9
Indexable
HTML: <div class="mt-3 form-group"> <h4 for="customRange1" class="fw-light">Price Range</h4> <div class="d-flex justify-content-between align-items-center mt-4 gap-2 flex-wrap"> <div class="d-flex align-items-center gap-1"> <label for="minValue" class="form-label fw-bold mb-0">Min:</label> <input type="number" id="minValue" name="minValue" class="form-control w-75 w-md-50" min="0" max="10000" value="2500"> </div> <div class="d-flex align-items-center gap-1"> <label for="maxValue" class="form-label fw-bold mb-0">Max:</label> <input type="number" id="maxValue" name="maxValue" class="form-control w-75 w-md-50" min="0" max="10000" value="8500"> </div> </div> <div class="custom-range-container mt-3"> <div class="range-slider"> <input type="range" class="min-range" id="customRange1" min="0" max="10000" value="2500" step="1"> <input type="range" class="max-range" id="customRange2" min="0" max="10000" value="8500" step="1"> <div class="price-slider"></div> </div> </div> </div> CSS: .custom-range-container { position: relative; width: 100%; } /* Background range slider */ .custom-range-container .range-slider { position: absolute; top: 0; left: 0; width: 100%; height: 6px; background-color: #e4e4e4; border-radius: 5px; z-index: 1; } /* Green slider between the two handles */ .custom-range-container .price-slider { position: absolute; top: 0; height: 100%; background-color: var(--primary-color); border-radius: 5px; transition: left 0.1s ease, width 0.1s ease; z-index: 2; } /* Override the default range input styles */ .custom-range-container input[type="range"] { position: absolute; top: -8px; width: 100%; height: 6px; background: none; cursor: pointer; -webkit-appearance: none; pointer-events: none; z-index: 3; } /* Styling for the range slider handles */ .custom-range-container input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; background-color: darkslategrey; border-radius: 50%; pointer-events: all; position: relative; z-index: 4; } JS: const minRangeInput = document.getElementById('customRange1'); const maxRangeInput = document.getElementById('customRange2'); const minValueInput = document.getElementById('minValue'); const maxValueInput = document.getElementById('maxValue'); const priceSlider = document.querySelector('.price-slider'); const minGap = 500; // Minimum gap between min and max values function updateSlider() { let minVal = parseInt(minRangeInput.value, 10); let maxVal = parseInt(maxRangeInput.value, 10); const minRange = parseInt(minRangeInput.min, 10); const maxRange = parseInt(minRangeInput.max, 10); // Enforce minimum gap if (maxVal - minVal < minGap) { if (event.target === minRangeInput) { minVal = maxVal - minGap; minRangeInput.value = minVal; } else if (event.target === maxRangeInput) { maxVal = minVal + minGap; maxRangeInput.value = maxVal; } } // Calculate percentage positions const minPercentage = ((minVal - minRange) / (maxRange - minRange)) * 100; const maxPercentage = ((maxVal - minRange) / (maxRange - minRange)) * 100; // Update position and width of the price-slider priceSlider.style.left = `${minPercentage}%`; priceSlider.style.width = `${maxPercentage - minPercentage}%`; // Sync values with number input boxes minValueInput.value = minVal; maxValueInput.value = maxVal; } function updateRangeFromInput() { let minVal = parseInt(minValueInput.value, 10); let maxVal = parseInt(maxValueInput.value, 10); // Enforce minimum gap for number inputs if (maxVal - minVal < minGap) { if (event.target === minValueInput) { minVal = maxVal - minGap; minValueInput.value = minVal; } else if (event.target === maxValueInput) { maxVal = minVal + minGap; maxValueInput.value = maxVal; } } // Update the range slider values to match minRangeInput.value = minVal; maxRangeInput.value = maxVal; updateSlider(); } // Initialize the slider and update when inputs change updateSlider(); minRangeInput.addEventListener('input', updateSlider); maxRangeInput.addEventListener('input', updateSlider); // Add event listeners for the number input boxes minValueInput.addEventListener('input', updateRangeFromInput); maxValueInput.addEventListener('input', updateRangeFromInput);
Editor is loading...
Leave a Comment