Prices Range

<input type="range" class="trigger-range-input-price" min="0" max="100" value="20">

/* Basic styling for the slider */
.trigger-range-input-price {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
border-radius: 99px;
outline: none;
cursor: pointer;
background: #e2e8f0;
}

.trigger-range-input-price::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #ff9800;
border: 2px solid #ffffff;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: transform 0.1s ease, box-shadow 0.2s ease;
}

const sliders = document.querySelectorAll('.trigger-range-input-price');

function updateSlider(slider) {
const percentage = (slider.value - slider.min) / (slider.max - slider.min) * 100;
slider.style.background = `linear-gradient(to right, #ff9800 0%, #ff9800 ${percentage}%, #e2e8f0 ${percentage}%, #e2e8f0 100%)`;
// linear-gradient(to left... - RTL
}

sliders.forEach(slider => {
slider.addEventListener('input', () => updateSlider(slider));
updateSlider(slider);
});