<div class='wrap'>
<input id='r' type='range'/>
</div>
$bg: #3d3d4a;
$k: .1;
$p: 39%;
$track-w: 25em;
$track-h: .02*$track-w;
$thumb-d: $k*$track-w;
$chart-d: (1 - 2*$k)*100%;
@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 }
&:not(.full) {
position: relative;
output {
position: absolute;
top: 0;
width: $thumb-d; height: $thumb-d;
transform: translate(calc(var(--val)/100*#{$track-w - $thumb-d}));
color: #fff;
pointer-events: none
}
}
&.full {
height: $track-w;
box-shadow: 0 0 0 3px hotpink;
[type='range'] {
display: block;
transform-origin: 100% 0;
transform: rotate(-90deg) translatey(-100%);
box-shadow: inset 0 0 0 3px gold;
}
output {
width: $chart-d; height: $chart-d;
border-radius: 50%;
color: #7a7a7a;
font-size: 4.25em;
font-weight: 700
}
}
}
[type='range'] {
&, &::-webkit-slider-thumb { -webkit-appearance: none }
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
}
&::-ms-tooltip { display: none }
+ output {
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient($bg $p, transparent $p + .5%),
conic-gradient(#e64c65 calc(var(--val)*1%), #41a8ab 0%);
&:after { content: '%' }
}
}
const _R = document.getElementById('r'),
_W = _R.parentNode,
_O = document.createElement('output');
let val = null;
function update() {
let newval = +_R.value;
if(val !== newval)
_W.style.setProperty('--val', _O.value = val = newval)
};
update();
_O.setAttribute('for', _R.id);
_W.appendChild(_O);
if(getComputedStyle(_O).backgroundImage !== 'none')
_W.classList.add('full');
addEventListener('input', update, false);
addEventListener('change', update, false);
Also see: Tab Triggers