<input type='range' value='8' min='1' max='9' />

@import "compass/css3";

$block-w: 1.5em;
$block-h: .75em;
$block-gap: .25em;

$block-dt: sqrt(pow($block-w + $block-h/2, 2) + pow($block-h/2, 2));
$block-dr: sqrt(pow($block-h + $block-h/2, 2) + pow($block-h/2, 2));
$block-at: atan($block-h/2/($block-w + $block-h/2)) + 90deg;
$block-ar: atan(3) + 90deg;
$block-meet-a: 135deg;
$block-start: $block-h/2/sqrt(2);
$block-endt: $block-dt*cos($block-meet-a - $block-at) - $block-start;
$block-endr: $block-dr*cos($block-meet-a - $block-ar) - $block-start;

$c: (
  normal: #8baee3 #cae4ff #5c80b0 #425e8d, 
  filled: #ef6c2c #fcc051 #e45206 #a83301
);

$thumb-d: 1.75em;
$thumb-sh-i: inset 1px 1px 1px rgba(#333, .75);
$thumb-sh-i2: inset 0 1px 1px rgba(#333, .5);
$thumb-sh-o: 0 0 0 1px #808080;
$thumb-sh-o2: 0 0 1px #000;
$thumb-bg-mid: 
  radial-gradient(#db4f08 65%, rgba(#db4f08, 0) 72%) no-repeat, 
  radial-gradient(#fff 65%, rgba(#fff, 0) 72%) no-repeat;
$thumb-bg-main-list: #f3f3f3, #b5b4b5;
$thumb-r: .625em;
$thumb-xoff: $thumb-d/2;
$thumb-p: 20;
$thumb-ba: 360deg/$thumb-p;
$thumb-ta: 15deg;
$thumb-aoff: 90deg;
$thumb-sa: $thumb-aoff - $thumb-ta + 360deg;
$thumb-ea: $thumb-aoff + $thumb-ta;
$thumb-cp: 
  $thumb-xoff + $thumb-r*cos($thumb-sa) $thumb-r*(1 + sin($thumb-sa)), 
  50% 100%, 
  $thumb-xoff + $thumb-r*cos($thumb-ea) $thumb-r*(1 + sin($thumb-ea));

@for $i from 0 through $thumb-p {
  $ca: $thumb-aoff + $i*$thumb-ba;
    
  @if $ca > $thumb-ea and $thumb-sa > $ca {
    $thumb-cp: $thumb-cp, 
      $thumb-xoff + $thumb-r*cos($ca) $thumb-r*(1 + sin($ca));
  }
}

$track-min: 1;
$track-max: 9;
$track-n: $track-max - $track-min;
$track-k: 8;
$track-u: $block-w + $block-gap;
$track-w: $track-n*$track-u + $thumb-d;
$track-h: .5em;

$ruler-off: ($thumb-d - $block-w - $block-gap)/2;
$ruler-off-y: 2*$thumb-d;
$ruler-s: $block-w $block-h, 
  $block-w + $block-h/2 $block-h/2, $block-h/2 3*$block-h/2, 
  $block-w $block-h;
$ruler-list: ();
$ruler-fs: .625;

@for $i from $track-min through $track-max {
  $ruler-list: $ruler-list $i;
}

@function blocks($k: $track-k) {
  $bg: ();
  
  @for $i from $track-min through $track-max {
    $cc: map-get($c, if($i <= $k, filled, normal));
    
    $bg: 
      linear-gradient(to right bottom, transparent 50%, nth($cc, 1) 50%) 
        $ruler-off + ($i - 1)*$track-u $ruler-off-y + $block-h/2, 
      linear-gradient($block-meet-a, 
          transparent $block-start, nth($cc, 3) $block-start, 
          nth($cc, 3) $block-endt, transparent $block-endt) 
        $ruler-off + ($i - 1)*$track-u $ruler-off-y, 
      linear-gradient($block-meet-a, 
          transparent $block-start, nth($cc, 4) $block-start, 
          nth($cc, 4) $block-endr, transparent $block-endr) 
        $ruler-off + ($i - 1)*$track-u + $block-w $ruler-off-y, 
      linear-gradient(90deg, nth($cc, 1), nth($cc, 2)) 
        $ruler-off + ($i - 1)*$track-u $ruler-off-y + $block-h/2, 
      $bg;
  }
  
  @return $bg;
}

@mixin track() {
  width: $track-w; height: $track-h;
  border-radius: $track-h/2;
  box-shadow: 0 1px 1px #e7e7eb, 
    inset 0 .125em .25em #7c7d7e, 
    inset 0 -.125em .125em #c3c3c3;
  background: 
    linear-gradient(90deg, rgba(#fff,.07) 50%, transparent 50%),
    linear-gradient(90deg, rgba(#fff,.13) 50%, transparent 50%),
    linear-gradient(90deg, transparent 50%, rgba(#fff,.17) 50%),
    linear-gradient(90deg, transparent 50%, rgba(#fff,.19) 50%) #ccc;
  background-size: 13px 100%, 23px 100%, 29px 100%, 31px 100%;
}

@mixin thumb($flag: true) {
  box-sizing: border-box;
  border: solid .5em transparent;
  width: $thumb-d; height: $thumb-d;
  cursor: ew-resize;
  
  @if $flag {
    border-radius: 50% 50% 0;
    transform: rotate(45deg);
    box-shadow: $thumb-sh-o, $thumb-sh-i;
    background: 
      $thumb-bg-mid 1px 1px, 
      linear-gradient(135deg, $thumb-bg-main-list) border-box;
  }
  @else {
    border-width: .3125em .5625em .8125em;
    border-radius: $thumb-d;
    box-shadow: $thumb-sh-i2;
    background: 
      $thumb-bg-mid 0 1px, 
      linear-gradient($thumb-bg-main-list) border-box;
    -webkit-clip-path: polygon($thumb-cp);
  }
}

html {
  height: 100%;
  background: 
    linear-gradient(-45deg, 
        transparent 49%, #ccc 49%, #ccc 51%, transparent 51%), 
    linear-gradient(#e7e7eb, #aca0a7);
  background-size: 5px 5px, 100% 100%;
}

input[type='range'] {
  &, 
  &::-webkit-slider-runnable-track, 
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
  }
  
  position: absolute;
  top: 50%; left: 50%;
  border: solid 0 transparent;
  border-width: 0 .75*$block-w 3*$block-h;
  padding: 0;
  width: $track-w; height: $ruler-off-y;
  border-radius: .25em;
  transform: translate(-50%, -50%);
  background: blocks(0);
  background-repeat: no-repeat;
  background-size: $ruler-s;
  font-size: 1em;
  cursor: pointer;
  
  &::-webkit-slider-runnable-track {
    position: relative;
    @include track();
  }
  &::-moz-range-track {
    @include track();
  }
  &::-ms-track {
    border: none;
    @include track();
    color: transparent;
  }
  
  &::-ms-fill-lower { display: none; }
  
  &::-webkit-slider-thumb {
    position: relative;
    margin-top: $track-h/2 - $thumb-r;
    width: $thumb-d; height: $thumb-d;
    -webkit-filter: drop-shadow($thumb-sh-o2);
  }
  &::-moz-range-thumb {
    @include thumb();
  }
  &::-ms-thumb {
    @include thumb();
  }
  
  &::-webkit-slider-runnable-track, /deep/ #track, 
  &::-webkit-slider-thumb, /deep/ #thumb {
    &:before, &:after { position: absolute; }
  }
  
  &::-webkit-slider-runnable-track, /deep/ #track {
    &:before, &:after {
      overflow: hidden;
      top: ($ruler-off-y + $track-h + $block-h)/2/$ruler-fs;
      height: $block-h/$ruler-fs;
      color: #304b77;
      font: #{$ruler-fs*1em}/#{$block-h/$ruler-fs} arial, sans-serif;
      text-indent: ($block-w/2)/$ruler-fs - .3125em;
      word-spacing: $block-w/$ruler-fs - .5em;
      white-space: no-wrap;
      content: '#{$ruler-list}';
    }
    &:after {
      width: 0;
      color: #f4e6d5;
    }
  }
  
  &::-webkit-slider-thumb, /deep/ #thumb {
    &:before, &:after { content: ''; }
    &:before {
      @include thumb(false);
    }
  }
  
  @for $i from $track-min through $track-max {
    .js &[value='#{$i}'] {
      background: blocks($i);
      background-repeat: no-repeat;
      background-size: $ruler-s;
      
      &::-webkit-slider-runnable-track, /deep/ #track {
        &:after { width: $i*$track-u/$ruler-fs; }
      }
    }
  }
  
  &:focus {
    outline: none;
    box-shadow: 0 0 .25em grey;
  }
}

document.querySelector('input[type=range]').addEventListener('input', function() {
  this.setAttribute('value', this.value);
}, false);