<input type='range' value='47'/>

@import "compass/css3";

$root-main-c: #a7b2b8;
$root-sec-c: #2b2e34;

$input-h: 7.5em;

$track-k: 20;
$track-bw: .25em;
$track-w: 25em;
$track-h: 1.5em;
$track-u: $track-w/$track-k;

$thumb-w: 2.3125em;
$thumb-h: 1em;
$thumb-r: .25em;
$thumb-sh-i: inset 0 0 .125em #515354;
$thumb-sh-o: 0 0 1px #6a7277, 0 0 .125em #6a7277;
$thumb-base-bg: 
  radial-gradient(#{at 70% 100%}, #767c71, rgba(#767c71, 0) 70%) 
    no-repeat .35*$thumb-w 100% border-box, 
  radial-gradient(#{at 100% 70%}, #757b80, rgba(#757b80, 0) 70%) 
    no-repeat 100% .35*$thumb-h border-box;
$thumb-sp-bg: 
  linear-gradient(to left top, rgba(#8f999d, .5), rgba(#b3babe, .5)) 
    border-box
  rgba($root-main-c, .5);
$thumb-base-s: 100% $track-bw, $track-bw 100%;
$thumb-sp-s: 100% 100%;
$thumb-fs: .6875;

$ruler-line-w: .125em;
$ruler-w: ($track-k - 2)*$track-u + $ruler-line-w;
$ruler-h: 2*$track-bw;
$ruler: 
  repeating-linear-gradient(90deg, 
      rgba(#7a8d9a, .75), rgba(#7a8d9a, .75) $ruler-line-w,
      rgba(#3c494f, .75) $ruler-line-w, rgba(#3c494f, .75) $ruler-line-w, 
      transparent $ruler-line-w, transparent $track-u) 
    no-repeat 50% 0 border-box;
$ruler-fs: .75;

$shape-h: 2.4375em;
$shape-r: .1875em;
$shape-l-h: $shape-r .375em .75em 1.25em $shape-h - $shape-r;
$shape-top-w: .8125em;
$shape-l-w: 
  $shape-r ($thumb-w - $shape-top-w)/2 - $shape-r
  ($thumb-w - $shape-top-w)/2 + $shape-r
  ($thumb-w + .0625em)/2
  ($thumb-w + $shape-top-w)/2 - $shape-r
  ($thumb-w + $shape-top-w)/2 + $shape-r $thumb-w - $shape-r;
$shape-start-a: 
  -180deg, 60deg, -180deg, -135deg, -45deg, 180deg, -60deg,  0deg,  90deg;
$shape-end-a:   
  -120deg,  0deg, -135deg,  -45deg,   0deg, 120deg,   0deg, 90deg, 180deg;
$shape-off: (
  x: 
    nth($shape-l-w, 1) 
    nth($shape-l-w, 2) 
    nth($shape-l-w, 3) 
    nth($shape-l-w, 4) 
    nth($shape-l-w, 5) 
    nth($shape-l-w, 6) 
    nth($shape-l-w, 7) 
    nth($shape-l-w, 7) 
    nth($shape-l-w, 1), 
  y: 
    nth($shape-l-h, 4) 
    nth($shape-l-h, 3) 
    nth($shape-l-h, 2) 
    nth($shape-l-h, 1) 
    nth($shape-l-h, 2) 
    nth($shape-l-h, 3) 
    nth($shape-l-h, 4) 
    nth($shape-l-h, 5) 
    nth($shape-l-h, 5)
);
$shape-n: 9;
$shape-k: $shape-r/.0625em;
$shape-cp: $thumb-w $shape-h, 0 $shape-h;

@for $i from 1 through $shape-n {
  $start-a: nth($shape-start-a, $i);
  $base-a: 
    (nth($shape-end-a, $i) - $start-a)/$shape-k;
  
  $ox: nth(map-get($shape-off, x), $i);
  $oy: nth(map-get($shape-off, y), $i);
  
  @for $j from 0 through $shape-k {
    $ca: $start-a + $j*$base-a;
    
    $shape-cp: $shape-cp, 
      $ox + $shape-r*cos($ca) $oy + $shape-r*sin($ca);
  }
}

@mixin track() {
  box-sizing: border-box;
  border: solid $track-bw transparent;
  width: $track-w; height: $track-h;
  border-radius: $track-h/2;
  box-shadow: 
    0 1px 1px #5e7a8b, 
    0 -1px 1px #688090, 
    inset 0 .125em .125em rgba(#5b7382, .98),
    inset 0 .1875em .125em rgba(#374953, .75), 
    inset 0 -1px #5e717c;
  background: 
    $ruler, 
    linear-gradient(90deg, 
      rgba(#526d7e, .75), rgba(#657b88, .75), 
      rgba(#95a2a9, .75), rgba(#889399, .75), 
      rgba(#a5acb0, .75), rgba(#a29e80, .75), 
      rgba(#cb9f74, .75), rgba(#db6e5b, .75), 
      rgba(#dc1026, .75)) content-box, 
    linear-gradient(rgba(#5b7382, .75), rgba(#909ca3, .75)) border-box;
  background-size: $ruler-w $track-h - $track-bw, 
    100% 100%, 100% 100%;
}

@mixin thumb($flag: false) {
  border-radius: $thumb-r;
  cursor: ew-resize;
  
  @if $flag {
    width: $shape-top-w; height: $shape-h;
    filter: 
      drop-shadow(0 0 1px rgba(#ddd, .98)) 
      drop-shadow(0 0 3px rgba(#000, .98));
  }
  @else {
    border: solid $track-bw transparent;
    width: $thumb-w;height: $thumb-h;
    box-shadow: 
      $thumb-sh-o, $thumb-sh-i;
    background: $thumb-base-bg, $thumb-sp-bg;
    background-size: $thumb-base-s, $thumb-sp-s;
  }
}

html {
  height: 100%;
  background: 
    radial-gradient($root-main-c, rgba($root-main-c, 0) 50%), 
    linear-gradient(to right bottom, #3d7195, $root-main-c, $root-sec-c);
}

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 1em;
  padding: 0;
  width: $track-w; height: $input-h;
  border-radius: .25em;
  transform: translate(-50%, -50%);
  background: $ruler;
  background-position: 50% ($input-h - $track-h)/2 - $ruler-h;
  background-size: $ruler-w $ruler-h;
  font-size: 1em;
  cursor: pointer;
  
  &::-webkit-slider-runnable-track {
    position: relative;
    @include track();
  }
  &::-moz-range-track {
    @include track();
  }
  &::-ms-track {
    @include track();
    color: transparent
  }
  
  &::-ms-fill-lower { display: none; }
  
  &::-webkit-slider-thumb {
    position: relative;
    @include thumb(true);
    clip-path: polygon($shape-cp);
  }
  &::-moz-range-thumb {
    @include thumb();
  }
  &::-ms-thumb {
    @include thumb();
  }
  
  &::-webkit-slider-runnable-track, /deep/ #track {
    &:before {
      position: absolute;
      bottom: calc(100% + #{$ruler-h/$ruler-fs}); left: 0;
      color: #798084;
      font: #{$ruler-fs*1em} / 2 arial, sans-serif;
      text-indent: 2*$track-u/$ruler-fs - 1em;
      word-spacing: 2*$track-u/$ruler-fs - 1.41em;
      text-shadow: 0 1px #d8dee2;
      content: '10 20 30 40 50 60 70 80 90';
    }
  }
  
  &::-webkit-slider-thumb, /deep/ #thumb {
    &:before, &:after {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
    }
    &:before {
      box-sizing: border-box;
      top: 0;
      border: solid $track-bw transparent;
      border-top-width: nth($shape-l-h, 4);
      width: $thumb-w; height: $shape-h;
      box-shadow: $thumb-sh-i;
      background: 
        linear-gradient(#464b4d, #464b4d) no-repeat 47% 0 border-box, 
        radial-gradient(#7e8082 1px, #404446 2px, 
            rgba(#c3c7ca, .98) 3px, rgba(#c3c7ca, 0) 3px) 
          no-repeat 47% .625em border-box, 
        radial-gradient(at 65% 35%, #586067, rgba(#586067, 0) 70%) 
          no-repeat 100% 0 border-box, 
        $thumb-base-bg rgba($root-main-c, .98);
      background-size: 1px .625em, 
        2*$shape-r 2*$shape-r, 70% 70%, 
        $thumb-base-s;
      content: ''
    }
    .js &:after {
      bottom: $track-bw/$thumb-fs;
      color: #e9ebec;
      font: 600 #{$thumb-fs*1em} / 1.375 arial, sans-serif;
      text-shadow: 0 1px #000;
      content: '47°';
    }
  }
  
  &:focus {
    outline: none;
    box-shadow: 0 0 .25em grey;
    background-color: rgba($root-main-c, .35);
  }
}

var range_el = document.querySelector('input[type=range]'), 
    base_sel = '.js input[type=range]', 
    thumb_sel = ['::-webkit-slider-thumb', ' /deep/ #thumb'], 
    a = ':after'
    style_el = document.createElement('style');

document.body.appendChild(style_el);

range_el.addEventListener('input', function() {
  style_el.textContent = base_sel + thumb_sel[0] + a + ',' + 
    base_sel + thumb_sel[1] + a + '{content:"' + this.value + '°"}';
  console.log(style_el.textContent);
}, false);