<div class="range-labels">
                                <span class="value-low">0</span>
                                <span class="value-high">1000</span>
                            </div>
                            <input type="range" name="slider" class="range-slider" min="0" value="500" max="1000">
                            <div class="current-value-container">
                                <label for="current-value">Max:</label>
                                <input type="number" class=" form-field current-value" id="current-value" value="500" min="0" max="1000">
                            </div>
                        
                    

                        
                            const rangeSlider = document.querySelector(".range-slider")
                            const currentValue = document.querySelector(".current-value")

                            rangeSlider.addEventListener("input", () => {
                                currentValue.value = rangeSlider.value
                            })

                            currentValue.addEventListener('input', () => {
                                rangeSlider.value = currentValue.value
                            })