Untitled

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);