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