- let min = 0, max = 100, val = 25;

form(style=`--min: ${min}; --max: ${max}; --val: ${val}`)
  input(type='range' min=min max=max value=val list='l')
  datalist#l
    option(label='min' value=min)
    option(label='max' value=max)

$input-p: .375em;
$input-w: 19.5em;
$input-h: 2.25em;
$input-r: .5*$input-h;

$track-r: $input-r - $input-p;
$track-h: 2*$track-r;

$thumb-d: $input-h;
$thumb-r: .5*$thumb-d;

$label-w: 3em;
$label-o: .5*$label-w;

@mixin track() {
  margin: $input-p;
  height: $track-h;
  border-radius: $track-r;
  box-shadow: inset 0 1px 4px #8c8c8c;
  background: 
    linear-gradient(#f8dd36, #d68706) 
      0/ var(--pos) no-repeat, 
    linear-gradient(#efefef, #c9c9c9);
}

@mixin thumb() {
  box-sizing: border-box;
  border: solid $input-p transparent;
  width: $thumb-d; height: $thumb-d;
  border-radius: 50%;
  box-shadow: 
    0 2px 5px #7d7d7d;
  background: 
    linear-gradient(#c5c5c5, whitesmoke) padding-box, 
    linear-gradient(#fbfbfb, #c2c2c2) border-box;
  cursor: ew-resize
}

* { margin: 0; padding: 0; font: inherit }

body, form, datalist { display: grid }

body {
  overflow-x: hidden;
  min-height: 100vh;
  background: 
    linear-gradient(#f8f8f8, #d9d9d9);
  font: 1em/ 1.25 ubuntu, trebuchet ms, verdana;
  
  @media (max-width: 240px) { font-size: .75em }
}

form {
  --k: calc((var(--val) - var(--min))/
            (var(--max) - var(--min)));
  --pos: calc(#{$thumb-r} + var(--k)*(100% - #{$thumb-d}));
  grid-gap: .25em;
  place-self: center;
  min-width: 8em;
  width: calc(100% - 1.5em);
  max-width: $input-w;
  filter: Saturate(var(--hl, 0));
  transition: filter .3s ease-out;
  
  &:focus-within, &:hover { --hl: 1 }
}

input[type='range']{
  &, 
  &::-webkit-slider-runnable-track, 
  &::-webkit-slider-thumb { -webkit-appearance: none }
  
  height: $input-h;
  border-radius: $input-h;
  box-shadow: 0 -1px #eaeaea, 0 1px #fff;
  background: linear-gradient(#c3c3c3, #f1f1f1);
  cursor: pointer;
  
  &[list]::-webkit-slider-container { min-height: $track-h }

  &::-webkit-slider-container {
    -webkit-user-modify: read-write !important;
    @include track
  }
  
  &::-webkit-slider-runnable-track { margin: -$input-p }
  &::-moz-range-track { @include track }
  
  &::-webkit-slider-thumb { @include thumb }
  &::-moz-range-thumb { @include thumb }
  
  &:focus { outline: none }
}

datalist {
  grid-row: 1;
  grid-template-columns: $label-w 1fr $label-w;
  place-content: end center;
  margin: 0 $thumb-r - .5*$label-w;
  color: #bababa;
  text-align: center;
  text-transform: uppercase;
  
  &::after {
    place-self: end center;
    margin-bottom: 3px;
    width: Min(12em, 100%);
    min-height: .5em;
    grid-area: 1/ 2;
    background: 
      linear-gradient(90deg, transparent 2px, #f0ba22 0) 
        -1px/ 1em round;
    clip-path: 
      polygon(0 calc(100% - 1px), 
              0 100%, 100% 100%, 100% 0);
    content: ''
  }
}

/* external resources *only* for displaying the info boxes */

/* this below is all the JS needed for the demo itself to work */
document.documentElement.classList.add('js');

addEventListener('input', e => {
  let _t = e.target;
  
  _t.parentNode.style.setProperty('--val', +_t.value)
}, false);