JSFiddle - React, Tailwind, and code Playground

by Sergey Linnick

HTML

<div class="wrap">
<input id="r" type="range" list="dl">
<label for="r">Driver Level
<div class="labels" aria-hidden="true">
<span style="--i: 0;">0</span>
<span style="--i: 1;">1</span>
<span style="--i: 3;">2</span>
<span style="--i: 5;">3</span>
<span style="--i: 7;">4</span>
<span style="--i: 10;">5</span>
</div>
</label>
<datalist id="dl">
<option value="0" label="0"></option>
<option value="10" label="1"></option>
<option value="30" label="2"></option>
<option value="30" label="3"></option>
<option value="60" label="4"></option>
<option value="100" label="5"></option>
</datalist>
</div>

SCSS

$mover-w: 12.5em;
$thumb-d: 1.5em;
$track-w: $mover-w + $thumb-d;
$track-h: .25em;
$track-c: #ccc;
$ruler-c: #95a;
$ruler-u: .1*$mover-w;
$ruler-w: 2px;

@mixin track() {
	box-sizing: border-box;
	border: none;
	width: $track-w; height: $track-h;
	background: $track-c;
}

@mixin thumb() {
	box-sizing: border-box;
	border: none;
	width: $thumb-d; height: $thumb-d;
	border-radius: 50%;
	background: $track-c;
}

@mixin thumb-focus() { background: #f90; }

.wrap {
	display: flex;
	flex-direction: column-reverse;
	position: relative;
	width: $track-w;
	color: $track-c;
	font: 1em/1 trebuchet ms, tahoma, sans-serif;
}

[type='range'] {
	&, &::-webkit-slider-thumb {
		-webkit-appearance: none;
	}
	
	margin: 0;
	padding: 0;
	width: 100%; height: 2*$thumb-d;
	background: 
		repeating-linear-gradient(90deg,
			$track-c 0, 
			$track-c $ruler-w, 
			transparent 0, 
			transparent $ruler-u)
		calc(.5*(#{$thumb-d} - #{$ruler-w})) 1.25*$thumb-d/ calc(#{$mover-w} + #{$ruler-w}) .5*$thumb-d no-repeat;
	font: inherit;
	
	&::-webkit-slider-runnable-track {
		@include track
	}
	&::-moz-range-track { @include track }
	&::-ms-track { @include track }
	
	&::-webkit-slider-thumb {
		margin-top: .5*($track-h - $thumb-d);
		@include thumb
	}
	&::-moz-range-thumb { @include thumb }
	&::-ms-thumb {
		margin-top: 0;
		@include thumb
	}
	
	&::-ms-tooltip { display: none }
	
	&:focus {
		outline: none;
		
		&::-webkit-slider-thumb {
			@include thumb-focus
		}
		&::-moz-range-thumb { @include thumb-focus }
		&::-ms-thumb {
			@include thumb-focus
		}
		
		~ label span { color: $ruler-c }
	}

	~ label {
		color: #333;
		
		span { color: $track-c }
		
		&:after { margin: -4px; content: ':' }
	}
}

.labels {
	position: absolute;
	bottom: 0; left: .5*$thumb-d;
	
	span {
		position: absolute;
		left: calc(var(--i)*#{$ruler-u});
		transform: translate(-50%) scale(.9);
		font-weight: 700
	}
}