#range-h::-webkit-slider-runnable-track {
	background: linear-gradient(to right,
			hsl(0 100% 50%),
			hsl(30 100% 50%),
			hsl(60 100% 50%),
			hsl(90 100% 50%),
			hsl(120 100% 50%),
			hsl(150 100% 50%),
			hsl(180 100% 50%),
			hsl(210 100% 50%),
			hsl(240 100% 50%),
			hsl(270 100% 50%),
			hsl(300 100% 50%),
			hsl(330 100% 50%),
			hsl(360 100% 50%));
}

#range-h::-moz-range-track {
	background: linear-gradient(to right,
			hsl(0 100% 50%),
			hsl(30 100% 50%),
			hsl(60 100% 50%),
			hsl(90 100% 50%),
			hsl(120 100% 50%),
			hsl(150 100% 50%),
			hsl(180 100% 50%),
			hsl(210 100% 50%),
			hsl(240 100% 50%),
			hsl(270 100% 50%),
			hsl(300 100% 50%),
			hsl(330 100% 50%),
			hsl(360 100% 50%));
}

#range-s::-webkit-slider-runnable-track {
	background: linear-gradient(to right, hsl(var(--accent-h) 0% var(--accent-l)), hsl(var(--accent-h) 100% var(--accent-l)));
}

#range-s::-moz-range-track {
	background: linear-gradient(to right, hsl(var(--accent-h) 0% var(--accent-l)), hsl(var(--accent-h) 100% var(--accent-l)));
}

#range-l::-webkit-slider-runnable-track {
	background: linear-gradient(to right, hsl(var(--accent-h) var(--accent-s) 0%), hsl(var(--accent-h) var(--accent-s) 50%), hsl(var(--accent-h) var(--accent-s) 100%));
}

#range-l::-moz-range-track {
	background: linear-gradient(to right, hsl(var(--accent-h) var(--accent-s) 0%), hsl(var(--accent-h) var(--accent-s) 50%), hsl(var(--accent-h) var(--accent-s) 100%));
}