<div class='wrap'>
	<input id='r' type='range'/>
</div>

$bg: #3d3d4a;
$k: .1;
$track-w: 25em;
$track-h: .02*$track-w;
$thumb-d: $k*$track-w;

@mixin track() {
	border: none;
	width: $track-w; height: $track-h;
	border-radius: .5*$track-h;
	background: #343440
}

@mixin thumb() {
	border: none;
	width: $thumb-d; height: $thumb-d;
	border-radius: 50%;
	background: #e6323e
}

* { margin: 0 }

body { background: $bg }

.wrap {
	margin: 2em auto;
	width: $track-w;
	font: 2vmin trebuchet ms, arial, sans-serif;
	
	@media (max-width: 500px), (max-height: 500px) { font-size: 10px }
  @media (min-width: 1600px), (min-height: 1600px) { font-size: 32px }
}

[type='range'] {
	&, &::-webkit-slider-thumb { -webkit-appearance: none }
	
	display: block;
	padding: 0;
	width: $track-w; height: $thumb-d;
	background: transparent;
	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
	}
}