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