mckennatim/index.html

## index.html
<input type='range' id='r1' class='tip fill fill-replace'
       value='7' min='1' max='13' />
<input type='range' id='r2' class='tip fill'
       value='60' />
<input type='range' id='r3' class='tip'
       value='25' step='25' />
<input type='range' id='r4' class='fill'
       value='87' />

## prettify `<input type=range>` #101.markdown

      
    Raw
  

              prettify `<input type=range>` #101.markdown
            
          
    prettify <input type=range> #101

Goal: create a nicely styled cross-browser 1 element slider. Tested & works in Firefox 36, 39 (nightly), Chrome 41, 43 (canary)/ Opera 29, IE 11 on Windows 8. CSS only in IE. Not much JS needed for Firefox or Chrome/ Opera.
Has a few little nice extras in Chrome/ Opera - the ruler/ tooltip text. I'm getting them by using pseudo elements on the thumb and track. This is something that didn't work until recently, so I'm also using /deep/ - careful, experimental stuff, only supported in Blink, the spec has already changed, no future really, already not working anymore in canary - see (link #1, link #2).
I can also get a tooltip with the current value in IE via ::-ms-tooltip, but I cannot style that asshole.
Fallback for no JS in Firefox: use ::-moz-range-progress for the first slider instead of a variable (controlled via JS) size background on the track.
Fallback for no JS in Chrome/ Opera: same background for the track both before and after the thumb and no current value displayed.
Disclaimer because some people got the wrong idea: I did NOT design these sliders. Whoever knows me is probably aware of the fact that I'm 100% technical and 0% artistic. Me trying to design something would result in visual vomit. I just googled "slider design" and tried to reproduce (as well as I could) the images that search found. Inspiration for this demo:

From here.
You can see the rest of my 1 range input sliders in this collection.
A Pen by Ana Tudor on CodePen.
License.

  
## script.js
var range_els = document.querySelectorAll('input[type=range]'),
    n = range_els.length,
    style_el = document.createElement('style'),
    styles = [],
    track_sel = [
      '::-moz-range-track',
      '::-webkit-slider-runnable-track', ' /deep/ #track'],
    thumb_sel = ['::-webkit-slider-thumb', ' /deep/ #thumb'],
    a = ':after', b = ':before',
    s = ['', '%', '%'];

document.body.appendChild(style_el);

for(var i = 0; i < n; i++) {
  styles.push('');

  range_els[i].addEventListener('input', function() {
    var idx = this.id.split('r')[1] - 1,
        base_sel = '.js #' + this.id,
        str = '',
        min = this.min || 0, max = this.max || 100,
        c_style, u, edge_w, val;

    this.setAttribute('value', this.value);

    if(this.classList.contains('tip')) {
      str += base_sel + thumb_sel[0] + a + ',' +
        base_sel + thumb_sel[1] + a +
        '{content:"' + this.value + s[idx] + '"}';
    }

    if(this.classList.contains('fill')) {
      if(idx == 0) {
        c_style = getComputedStyle(this);
        u = c_style.backgroundSize.split(' ')[0].split('px')[0];
        edge_w = (c_style.width.split('px')[0] - u*(max - min))/2;
        val = ((this.value - min)*u + edge_w) + 'px';
      }
      else {
        val = this.value + '%';
      }

      if(this.classList.contains('fill-replace')) {
        str += base_sel + track_sel[0] + '{background-size:' + val + '}';
      }

      str += base_sel + track_sel[1] + a + ',' +
        base_sel + track_sel[2] + a + '{width:' + val + '}';
    }

    styles[idx] = str;
    style_el.textContent = styles.join('');
  }, false);
}

## style.css
@import "compass/css3";

//* ===== ===== ===== VARIABLES ===== ===== ===== */


$ff: trebuchet ms, verdana, arial, sans-serif;


//* ----- 1st slider ----- */

$r1-val: 7;

$r1-thumb-bw: 1em;
$r1-thumb-pad: .3125em;
$r1-thumb-d: 3em;
$r1-thumb-d-inner: $r1-thumb-d - 2*$r1-thumb-bw;

$r1-tip-w: 2em;
$r1-tip-pos-fix:
  ($r1-thumb-d-inner/2 - $r1-thumb-pad - $r1-tip-w/2),
  ($r1-thumb-d-inner/2);
$r1-tip-fs: .9375;

$r1-ruler-line-w: 1px;
$r1-ruler-line-h: 1.25em;
$r1-ruler-unit: 2em;
$r1-ruler-min: 1;
$r1-ruler-max: 13;
$r1-ruler-n: $r1-ruler-max - $r1-ruler-min;
$r1-ruler-c: #eee;
$r1-ruler-caf: rgba($r1-ruler-c, 0);
$r1-ruler-fs: .75;

$r1-fill-bg: linear-gradient(#fff, #bbb);

$r1-track-w: $r1-ruler-n*$r1-ruler-unit + $r1-thumb-d;
$r1-track-h: .5em;
$r1-track-bg: linear-gradient(#e8f0f3, #c7f183);

$r1-input-pad: .7em;
$r1-input-h: 4.875em;


//* ----- 2nd slider ----- */

$r2-val: 60;

$r2-thumb-bw: .125em;
$r2-thumb-d: 1em;

$tip-fs: .6875;
$tip-w: 1.75em/$tip-fs;
$tip-h: 2.25em/$tip-fs;
$tip-bubble-rx: $tip-w/2;
$tip-bubble-ry: $tip-bubble-rx - .0625em/$tip-fs;
$tip-bubble-ang-cut: 15deg;
$tip-bubble-ang-ref: 90deg;
$tip-bubble-ang-s: $tip-bubble-ang-ref + $tip-bubble-ang-cut;
$tip-bubble-ang-e: $tip-bubble-ang-ref - $tip-bubble-ang-cut + 360deg;
$tip-cp-n: ceil($tip-bubble-rx*$tip-fs/.0625em);
$tip-cp-ang-base: 360deg/$tip-cp-n;
$tip-cp: 75% 100%;

$r2-ruler-fs: .78;

$r2-fill-bg: linear-gradient(0deg,
  #4e7a0e 1px, #80b03a 1px, #98c751 90%, #c5df9c);

$r2-track-w: 20.5em;
$r2-track-h: .4375em;
$r2-track-bg: #c6c6c6;

$r2-input-pad: 1em;
$r2-input-h: 4.75em;


//* ----- 3rd slider ----- */

$r3-val: 25;

$r3-input-h-k: 2;
$r3-input-sh-h: .625em;

$r3-track-w: 22.5em;
$r3-track-h: 2em;

$r3-ruler-n: 5;
$r3-ruler-unit: $r3-track-w/$r3-ruler-n;

$r3-thumb-d: 2.625em;
$r3-thumb-bw: ($r3-ruler-unit - $r3-thumb-d)/2;
$r3-thumb-pad: .1875em;
$r3-thumb-bar-h: .25em;
$r3-thumb-bar-r: $r3-thumb-bar-h/2;
$r3-thumb-bar-w: $r3-thumb-d - 2*$r3-thumb-pad;
$r3-thumb-bar-c: #5a8a10;
$r3-thumb-bar-caf: rgba($r3-thumb-bar-c, 0);
$r3-thumb-line-c: #4a6e10;
$r3-thumb-line-caf: rgba($r3-thumb-line-c, 0);

$r3-tip-fs: .85;


//* ----- 4th slider ----- */

$r4-val: 87;

$r4-ruler-unit: 3em;
$r4-ruler-n: 6;
$r4-ruler-end: 2.375em;
$r4-ruler-line-w: 1px;
$r4-ruler-line-h: .625em;
$r4-ruler-bg: linear-gradient(90deg, #8a5509 $r4-ruler-line-w,
  transparent $r4-ruler-line-w) repeat-x;

$r4-track-bw: 1em;
$r4-track-w: $r4-ruler-n*$r4-ruler-unit + 2*$r4-ruler-end;
$r4-track-h: 2.625em;
$r4-track-shi: inset 1px 1px .125em #553117;
$r4-track-sho: 0 1.1875em .25em -1.25em #000;
$r4-track-bg-base:
  radial-gradient(at 100% 50%, rgba(#714505, 0) 65%, #714505 71%)
    no-repeat border-box,
  $r4-ruler-bg $r4-ruler-end 0 border-box,
  $r4-ruler-bg $r4-ruler-end 100% border-box,
  linear-gradient(#714505, #a0640e .125em) border-box;
$r4-track-bg-base-size: $r4-track-h/2 $r4-track-h + .125em,
    $r4-ruler-unit $r4-ruler-line-h,
    $r4-ruler-unit $r4-ruler-line-h, 100%;
$r4-track-bg-mid:
  linear-gradient(#70421e, #70421e) padding-box;
$r4-track-bg-mid-size: 100%;

$r4-thumb-d: 1em;
$r4-thumb-bw: $r4-track-bw - $r4-thumb-d/2;

$r4-fill-sf: ($r4-track-w - 2*$r4-track-bw)/$r4-track-w;
$r4-fill-h: $r4-track-h - 2*$r4-track-bw;
$r4-fill-sf2: ($r4-track-w - 2*$r4-track-bw - $r4-thumb-d)/($r4-track-w - 2*$r4-track-bw);

$r4-input-h-k: 2;


//* ===== ===== ===== FUNCTIONS & COMPUTATIONS ===== ===== ===== */


//* ----- 1st slider ----- */
@function r1-gen-ruler-cp() {}


//* ----- 2nd slider ----- */
@for $i from 0 through $tip-cp-n {
  $ang-curr: $tip-bubble-ang-ref + $i*$tip-cp-ang-base;

  @if $ang-curr >= $tip-bubble-ang-s and $ang-curr <= $tip-bubble-ang-e {
    $x: $tip-bubble-rx*(1 + cos($ang-curr));
    $y: $tip-bubble-ry*(1 + sin($ang-curr));
    $tip-cp: $tip-cp, $x $y !global;
  }
}


//* ===== ===== ===== MIXINS ===== ===== ===== */

//* ----- Generic ----- */

@mixin thumb-base() {
  box-sizing: border-box;
  border: solid 0 transparent;
  border-radius: 50%;
  cursor: ew-resize;
}


//* ----- 1st slider ----- */

@mixin r1-track($flag: null) {
  width: $r1-track-w; height: $r1-track-h;
  border-radius: $r1-track-h/2;
  /* shadow not really visible in IE :( */
  box-shadow: 0 .25em if($flag == ms, 1px, .125em -.125em) #5c8520;
  background: $r1-track-bg;
}

@mixin r1-fill($flag: null) {
  height: $r1-track-h;
  border-radius: $r1-track-h/2;
  /* shadow not really visible in IE :( */
  box-shadow: 0 .25em if($flag == ms, 1px, .25em -.125em) #5c8520;
  background: $r1-fill-bg;
}

@mixin r1-thumb() {
  border-width: $r1-thumb-bw;
  padding: $r1-thumb-pad;
  width: $r1-thumb-d; height: $r1-thumb-d;
  background: linear-gradient(grey, grey) content-box,
    radial-gradient(circle at 25% 25%, #fbfbf9, #bfccad) padding-box;
}


//* ----- 2nd slider ----- */

@mixin r2-track() {
  width: $r2-track-w; height: $r2-track-h;
  border-radius: $r2-track-h/2;
  box-shadow: inset 0 1px 1px #888;
  background: $r2-track-bg;
}

@mixin r2-fill() {
  height: $r2-track-h;
  border-radius: $r2-track-h/2;
  background: $r2-fill-bg;
}

@mixin r2-thumb() {
  border-width: $r2-thumb-bw;
  width: $r2-thumb-d; height: $r2-thumb-d;
  background:
    radial-gradient(#b4dbaf, #0e5401, #559149 3px,
        #73af67, #bff0b4, #abe29a 65%) padding-box,
    linear-gradient(-45deg, green, #6db04f) border-box #fff;
  filter: drop-shadow(1px .125em .125em rgba(#000, .4))
}


//* ----- 3rd slider ----- */

@mixin r3-track() {
  width: $r3-track-w; height: $r3-track-h;
  border-radius: .375em;
  background: linear-gradient(#fff, #d5d5d5);
}

@mixin r3-thumb() {
  border-width: $r3-thumb-bw;
  padding: $r3-thumb-pad;
  width: $r3-ruler-unit; height: $r3-ruler-unit;
  border-radius: .25em + $r3-thumb-bw;
  box-shadow: inset 0 -1px #5f8323, inset -1px 0 #5f8323;
  opacity: .65;
  background:
    radial-gradient(circle, $r3-thumb-bar-c 69%, $r3-thumb-bar-caf 71%)
      no-repeat content-box,
    radial-gradient(circle, $r3-thumb-bar-c 69%, $r3-thumb-bar-caf 71%)
      no-repeat 100% 0 content-box,
    linear-gradient(90deg, transparent $r3-thumb-bar-r,
        $r3-thumb-bar-c $r3-thumb-bar-r,
        $r3-thumb-bar-c $r3-thumb-bar-w - $r3-thumb-bar-r,
        transparent $r3-thumb-bar-w - $r3-thumb-bar-r)
      no-repeat content-box,
    repeating-linear-gradient(90deg, $r3-thumb-line-caf, $r3-thumb-line-c 1px,
        $r3-thumb-line-caf 2px, $r3-thumb-line-caf $r3-thumb-bar-h)
      no-repeat 50% 100% content-box,
    linear-gradient(#9ece53, #77a330) padding-box;
  background-size:
    $r3-thumb-bar-h $r3-thumb-bar-h, $r3-thumb-bar-h $r3-thumb-bar-h,
    100% $r3-thumb-bar-h, 2.5*$r3-thumb-bar-h $r3-thumb-bar-h, 100%;

  .js & { opacity: .99; }
}


//* ----- 4th slider ----- */

@mixin r4-track($flag: null) {
  box-sizing: border-box;
  border: solid $r4-track-bw transparent;
  width: $r4-track-w; height: $r4-track-h;
  border-radius: $r4-track-h/2;

  @if $flag == webkit {
    border-width: $r4-track-bw $r4-track-bw - $r4-thumb-d/2;
    box-shadow: $r4-track-sho;
    background: $r4-track-bg-base;
    background-size: $r4-track-bg-base-size;
  }
  @else {
    box-shadow: $r4-track-sho, $r4-track-shi;
    background: $r4-track-bg-mid, $r4-track-bg-base;
    background-size: $r4-track-bg-mid-size, $r4-track-bg-base-size;
  }
}

@mixin r4-fill() {
  border-radius: $r4-fill-h;
  background: linear-gradient(0deg, #374900 1px, #9fb634 1px, #d2e57e);
}

@mixin r4-thumb($flag: null) {
  @if $flag == webkit {
    width: $r4-thumb-d; height: $r4-thumb-d;
  }
  @else {
    border-width: $r4-thumb-bw;
    width: $r4-thumb-d + 2*$r4-thumb-bw; height: $r4-thumb-d + 2*$r4-thumb-bw;
  }
  padding: $r4-thumb-d/3;

  background:
    radial-gradient(at 65% 65%, #c1c1c1, #868887 70%) content-box,
    linear-gradient(#fff, #e1dad4) padding-box;
  filter: drop-shadow(1px 1px .125em rgba(#000, .5));
}


//* CSS */

html {
  background: radial-gradient(#fabc4d, #eb7e15 70%) no-repeat #eb7e15;
}

input[type='range'] {
  &,
  &::-webkit-slider-runnable-track,
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
  }

  display: block;
  margin: 2.5em auto;
  padding: 0; /* inconsistent */
  opacity: .75;
  background: transparent; /* inconsistent */
  /* font-size inconsistent */
  font: 1em $ff;
  cursor: pointer;

  &::-webkit-slider-runnable-track {
    position: relative; /* prep for creating rulers */
  }
  &::-webkit-slider-runnable-track, /deep/ #track {
    &:before, &:after { position: absolute; }
  }
  &::-ms-track {
    border: none; /* remove default border */
    color: transparent; /* remove dfault tick marks */
  }

  &::-webkit-slider-thumb {
    @include thumb-base();
  }
  &::-moz-range-thumb {
    @include thumb-base();
  }
  &::-ms-thumb {
    @include thumb-base();
  }

  &:nth-of-type(1) {
    border: solid 1px transparent;
    padding: 0 $r1-input-pad;
    width: $r1-track-w; height: $r1-input-h;
    border-radius: .25em;
    box-shadow:
      inset 0 1px 1px #c0ed78 /* top light line */,
      0 1px 1px #5f8f2f /* highlight bottom border */,
      /* not very god repro of bottom shadow :( */
      0 1em 2.25em -2.25em #000,
      0 1.125em 2.315em -2.315em #000,
      0 1.25em 2.375em -2.375em #000,
      0 1.375em 2.5em -2.5em #000;
    background:
      linear-gradient(90deg,
        $r1-ruler-c $r1-ruler-line-w, $r1-ruler-caf $r1-ruler-line-w)
      repeat-x $r1-thumb-d/2 50% content-box,
      linear-gradient(#98cb4c, #74a22f) padding-box,
      linear-gradient(#7da142, #5c8022) border-box;
    background-size: $r1-ruler-unit $r1-ruler-line-h, 100% 100%, 100% 100%;


    /* ------- the track ------- */
    &::-webkit-slider-runnable-track {
      @include r1-track();
      transform: translateY(-$r1-track-h);
    }
    &::-moz-range-track {
      @include r1-track();
    }
    &::-ms-track {
      @include r1-track(ms);
    }


    /* ------- the fill ------- */
    &::-webkit-slider-runnable-track, /deep/ #track {
      .js &:after {
        top: 0; left: 0;
        width: ($r1-val - 1)*$r1-ruler-unit + $r1-thumb-d/2;
        @include r1-fill();
        clip-path: inset(0 ($r1-thumb-d-inner/2) 0 0);
        content: '';
      }
    }
    .js &::-moz-range-track {
      background: $r1-fill-bg no-repeat, $r1-track-bg;
      background-size: ($r1-val - 1)*$r1-ruler-unit + $r1-thumb-d/2 100%;
    }
    &::-moz-range-progress {
      @include r1-fill();
      .js & { opacity: 0; }
    }
    &::-ms-fill-lower {
      @include r1-fill();
    }


    /* ------- the ruler ------- */
    &::-webkit-slider-runnable-track, /deep/ #track,
    &::-webkit-slider-thumb, /deep/ #thumb {
      &:before {
        position: absolute;
        top: 175%;
        left: 0; right: 0;
        color: $r1-ruler-c;
        font: #{$r1-ruler-fs*1em}/2 $ff;
      }
    }
    &::-webkit-slider-runnable-track, /deep/ #track {
      &:before {
        text-indent: $r1-thumb-d/2/$r1-ruler-fs - .3125em;
        word-spacing: $r1-ruler-unit/$r1-ruler-fs - .85em;
        content: '1 2 3 4 5 6 7 8 9';
      }
    }
    &::-webkit-slider-thumb, /deep/ #thumb {
      &:before {
        text-indent: ($r1-thumb-d/2 + 9*$r1-ruler-unit)/$r1-ruler-fs - .5em;
        word-spacing: $r1-ruler-unit/$r1-ruler-fs - 1.375em;
        content: '10 11 12 13';
      }
    }
    @for $i from $r1-ruler-min through $r1-ruler-max {
      &[value='#{$i}'] {
        &::-webkit-slider-runnable-track, /deep/ #track,
        &::-webkit-slider-thumb, /deep/ #thumb {
          .js &:before {
            $pos: ($r1-thumb-d/2 +
              ($i - $r1-ruler-min)*$r1-ruler-unit)/$r1-ruler-fs;

            clip-path: polygon(0 0, $pos - 1em 0, $pos - 1em 100%,
              $pos + 1em 100%, $pos + 1em 0, 100% 0, 100% 100%, 0 100%);
          }
        }
      }
    }


    /* ------- the thumb ------- */
    &::-webkit-slider-thumb {
      margin-top: ($r1-track-h - $r1-thumb-d)/2;
      @include r1-thumb();
    }
    &::-moz-range-thumb {
      @include r1-thumb();
    }
    &::-ms-thumb {
      @include r1-thumb();
    }


    /* ------- the tip ------- */
    &::-webkit-slider-thumb, /deep/ #thumb {
      &:after {
        display: block;
        width: $r1-tip-w;
        transform: translate($r1-tip-pos-fix);
        color: $r1-ruler-c;
        font: 700 #{$r1-tip-fs*1em}/2.125 $ff;
        text-align: center;
        .js & { content: '#{$r1-val}'; }
      }
    }
  }


  &:nth-of-type(2) {
    padding: 0 $r2-input-pad;
    width: $r2-track-w; height: $r2-input-h;
    border-radius: .25em;
    box-shadow: inset 0 -1px #f1e4cc,
      1px 0 rgba(#db9b33, .95),
      0 .125em 1px rgba(#db9b33, .95);
    background: linear-gradient(#fff, #d7d7d7);


    /* ------- the track ------- */
    &::-webkit-slider-runnable-track {
      @include r2-track();
      transform: translateY(-$r2-track-h);
    }
    &::-moz-range-track {
      @include r2-track();
    }
    &::-ms-track {
      @include r2-track();
    }


    /* ------- the fill ------- */
    &::-webkit-slider-runnable-track, /deep/ #track {
      .js &:after {
        top: 0; left: 0;
        width: $r2-val*1%;
        @include r2-fill();
        content: '';
      }
    }
    &::-moz-range-progress {
      @include r2-fill();
    }
    &::-ms-fill-lower {
      @include r2-fill();
    }


    /* ------- the ruler ------- */
    &::-webkit-slider-runnable-track, /deep/ #track {
      &:before {
        top: 100%; left: 50%;
        transform: translate(-50%);
        color: #b0b0b0;
        font: #{$r2-ruler-fs*1em}/1.5 $ff;
        white-space: nowrap;
        word-spacing: $r2-track-w/$r2-ruler-fs - 4em;
        content: '0% 100%';
      }
    }


    /* ------- the thumb ------- */
    &::-webkit-slider-thumb {
      position: relative;
      z-index: 2;
      margin-top: ($r2-track-h - $r2-thumb-d)/2;
      @include r2-thumb();
    }
    &::-moz-range-thumb {
      @include r2-thumb();
    }
    &::-ms-thumb {
      @include r2-thumb();
    }


    /* ------- the tip ------- */
    &::-webkit-slider-thumb, /deep/ #thumb {
      &:after {
        position: absolute;
        right: 50%; bottom: 150%;
        width: $tip-w; height: $tip-h;
        transform: translate(25%);
        background: rgba(#fff, .5);
        color: #222;
        font: 900 #{$tip-fs*1em}/(2.25*$tip-bubble-rx) $ff;
        text-align: center;
        text-shadow: 0 0 1px rgba(#000, .25);
        clip-path: polygon($tip-cp);
        .js & { content: '#{$r2-val}%'; }
      }
    }
  }


  &:nth-of-type(3) {
    width: $r3-track-w; height: $r3-input-h-k*$r3-track-h;
    background: radial-gradient(rgba(#000, .5), transparent 70%)
          no-repeat 50% (($r3-input-h-k + 1)*$r3-track-h - $r3-input-sh-h)/2;
    background-size: 90% $r3-input-sh-h;


    /* ------- the track ------- */
    &::-webkit-slider-runnable-track {
      @include r3-track();
    }
    &::-moz-range-track {
      @include r3-track();
    }
    &::-ms-track {
      @include r3-track();
    }


    /* ------- the fill ------- */
    &::-ms-fill-lower { display: none; }


    /* ------- the ruler ------- */
    &::-webkit-slider-runnable-track, /deep/ #track {
      &:before, &:after {
        z-index: 1;
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        font: #{$r3-tip-fs*1em} / #{$r3-track-h/$r3-tip-fs} $ff;
        color: #777;
        text-shadow: 0 0 1px rgba(#555, .5);
      }
      &:before {
        text-indent: $r3-ruler-unit/2/$r3-tip-fs - .5em;
        word-spacing: 4*$r3-ruler-unit/$r3-tip-fs - 1.875em;
        content: '0% 100%';
      }
      &:after {
        text-indent: 3*$r3-ruler-unit/2/$r3-tip-fs - .8125em;
        word-spacing: $r3-ruler-unit/$r3-tip-fs - 1.875em;
        content: '25% 50% 75%';
      }
    }


    /* ------- the thumb ------- */
    &::-webkit-slider-thumb {
      position: relative;
      z-index: 2;
      margin-top: ($r3-track-h - $r3-ruler-unit)/2;
      @include r3-thumb();
    }
    &::-moz-range-thumb {
      @include r3-thumb();
    }
    &::-ms-thumb {
      @include r3-thumb();
    }


    /* ------- the tip ------- */
    &::-webkit-slider-thumb, /deep/ #thumb {
      &:after {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        color: #e7f5ce;
        font: #{$r3-tip-fs*1em} $ff;
        .js & { content: '#{$r3-val}%'; }
      }
    }
  }


  &:nth-of-type(4) {
    width: $r4-track-w; height: $r4-input-h-k*$r4-track-h;
    background: radial-gradient(rgba(#000, .65),
          rgba(#000, .35) 40%, transparent 70%)
          no-repeat 50% (($r4-input-h-k + 1)*$r4-track-h - 2*$r3-input-sh-h)/2;
    background-size: 90% 2*$r3-input-sh-h;


    /* ------- the track ------- */
    &::-webkit-slider-runnable-track {
      @include r4-track(webkit);
    }
    &::-webkit-slider-runnable-track, /deep/ #track {
      &:before, &:after {
        top: 0; left: $r4-thumb-d/2;
        width: $r4-track-w - 2*$r4-track-bw; height: $r4-fill-h;
        content: '';
      }
      &:before {
        border-radius: $r4-fill-h;
        box-shadow: $r4-track-shi;
        background: $r4-track-bg-mid;
      }
    }
    &::-moz-range-track {
      @include r4-track();
    }
    &::-ms-track {
      @include r4-track();
    }


    /* ------- the fill ------- */
    &::-webkit-slider-runnable-track, /deep/ #track {
      .js &:after {
        width: $r4-val*1%;
        @include r4-fill();
        transform-origin: 0 50%;
        transform: scaleX($r4-fill-sf2);
        content: '';
      }
    }
    &::-moz-range-progress {
      @include r4-fill();
      height: $r4-fill-h;
      border-radius: #{$r4-fill-h/2/$r4-fill-sf} / #{$r4-fill-h/2};
      transform-origin: 0 50%;
      transform: translate($r4-track-bw)
        scale($r4-fill-sf);
    }
    &::-ms-fill-lower {
      @include r4-fill();
    }


    /* ------- the thumb ------- */
    &::-webkit-slider-thumb {
      position: relative;
      z-index: 2;
      margin-top: ($r4-track-h - $r4-thumb-d)/2 - $r4-track-bw;
      @include r4-thumb(webkit);
    }
    &::-moz-range-thumb {
      @include r4-thumb();
    }
    &::-ms-thumb {
      @include r4-thumb();
    }


    /* ------- the tip ------- */
    &::-ms-tooltip { display: none; }
  }

  &:focus {
    outline: none;
    opacity: .99;
  }
}

input[type='range']:not(*:root):first-of-type {
  background-position: $r1-thumb-d/2 calc(50% - #{$r1-track-h}), 0 0, 0 0;
}
	<input type='range' id='r1' class='tip fill fill-replace'
	value='7' min='1' max='13' />
	<input type='range' id='r2' class='tip fill'
	value='60' />
	<input type='range' id='r3' class='tip'
	value='25' step='25' />
	<input type='range' id='r4' class='fill'
	value='87' />
	var range_els = document.querySelectorAll('input[type=range]'),
	n = range_els.length,
	style_el = document.createElement('style'),
	styles = [],
	track_sel = [
	'::-moz-range-track',
	'::-webkit-slider-runnable-track', ' /deep/ #track'],
	thumb_sel = ['::-webkit-slider-thumb', ' /deep/ #thumb'],
	a = ':after', b = ':before',
	s = ['', '%', '%'];

	document.body.appendChild(style_el);

	for(var i = 0; i < n; i++) {
	styles.push('');

	range_els[i].addEventListener('input', function() {
	var idx = this.id.split('r')[1] - 1,
	base_sel = '.js #' + this.id,
	str = '',
	min = this.min \|\| 0, max = this.max \|\| 100,
	c_style, u, edge_w, val;

	this.setAttribute('value', this.value);

	if(this.classList.contains('tip')) {
	str += base_sel + thumb_sel[0] + a + ',' +
	base_sel + thumb_sel[1] + a +
	'{content:"' + this.value + s[idx] + '"}';
	}

	if(this.classList.contains('fill')) {
	if(idx == 0) {
	c_style = getComputedStyle(this);
	u = c_style.backgroundSize.split(' ')[0].split('px')[0];
	edge_w = (c_style.width.split('px')[0] - u*(max - min))/2;
	val = ((this.value - min)*u + edge_w) + 'px';
	}
	else {
	val = this.value + '%';
	}

	if(this.classList.contains('fill-replace')) {
	str += base_sel + track_sel[0] + '{background-size:' + val + '}';
	}

	str += base_sel + track_sel[1] + a + ',' +
	base_sel + track_sel[2] + a + '{width:' + val + '}';
	}

	styles[idx] = str;
	style_el.textContent = styles.join('');
	}, false);
	}
	@import "compass/css3";

	//* ===== ===== ===== VARIABLES ===== ===== ===== */


	$ff: trebuchet ms, verdana, arial, sans-serif;


	//* ----- 1st slider ----- */

	$r1-val: 7;

	$r1-thumb-bw: 1em;
	$r1-thumb-pad: .3125em;
	$r1-thumb-d: 3em;
	$r1-thumb-d-inner: $r1-thumb-d - 2*$r1-thumb-bw;

	$r1-tip-w: 2em;
	$r1-tip-pos-fix:
	($r1-thumb-d-inner/2 - $r1-thumb-pad - $r1-tip-w/2),
	($r1-thumb-d-inner/2);
	$r1-tip-fs: .9375;

	$r1-ruler-line-w: 1px;
	$r1-ruler-line-h: 1.25em;
	$r1-ruler-unit: 2em;
	$r1-ruler-min: 1;
	$r1-ruler-max: 13;
	$r1-ruler-n: $r1-ruler-max - $r1-ruler-min;
	$r1-ruler-c: #eee;
	$r1-ruler-caf: rgba($r1-ruler-c, 0);
	$r1-ruler-fs: .75;

	$r1-fill-bg: linear-gradient(#fff, #bbb);

	$r1-track-w: $r1-ruler-n*$r1-ruler-unit + $r1-thumb-d;
	$r1-track-h: .5em;
	$r1-track-bg: linear-gradient(#e8f0f3, #c7f183);

	$r1-input-pad: .7em;
	$r1-input-h: 4.875em;


	//* ----- 2nd slider ----- */

	$r2-val: 60;

	$r2-thumb-bw: .125em;
	$r2-thumb-d: 1em;

	$tip-fs: .6875;
	$tip-w: 1.75em/$tip-fs;
	$tip-h: 2.25em/$tip-fs;
	$tip-bubble-rx: $tip-w/2;
	$tip-bubble-ry: $tip-bubble-rx - .0625em/$tip-fs;
	$tip-bubble-ang-cut: 15deg;
	$tip-bubble-ang-ref: 90deg;
	$tip-bubble-ang-s: $tip-bubble-ang-ref + $tip-bubble-ang-cut;
	$tip-bubble-ang-e: $tip-bubble-ang-ref - $tip-bubble-ang-cut + 360deg;
	$tip-cp-n: ceil($tip-bubble-rx*$tip-fs/.0625em);
	$tip-cp-ang-base: 360deg/$tip-cp-n;
	$tip-cp: 75% 100%;

	$r2-ruler-fs: .78;

	$r2-fill-bg: linear-gradient(0deg,
	#4e7a0e 1px, #80b03a 1px, #98c751 90%, #c5df9c);

	$r2-track-w: 20.5em;
	$r2-track-h: .4375em;
	$r2-track-bg: #c6c6c6;

	$r2-input-pad: 1em;
	$r2-input-h: 4.75em;


	//* ----- 3rd slider ----- */

	$r3-val: 25;

	$r3-input-h-k: 2;
	$r3-input-sh-h: .625em;

	$r3-track-w: 22.5em;
	$r3-track-h: 2em;

	$r3-ruler-n: 5;
	$r3-ruler-unit: $r3-track-w/$r3-ruler-n;

	$r3-thumb-d: 2.625em;
	$r3-thumb-bw: ($r3-ruler-unit - $r3-thumb-d)/2;
	$r3-thumb-pad: .1875em;
	$r3-thumb-bar-h: .25em;
	$r3-thumb-bar-r: $r3-thumb-bar-h/2;
	$r3-thumb-bar-w: $r3-thumb-d - 2*$r3-thumb-pad;
	$r3-thumb-bar-c: #5a8a10;
	$r3-thumb-bar-caf: rgba($r3-thumb-bar-c, 0);
	$r3-thumb-line-c: #4a6e10;
	$r3-thumb-line-caf: rgba($r3-thumb-line-c, 0);

	$r3-tip-fs: .85;


	//* ----- 4th slider ----- */

	$r4-val: 87;

	$r4-ruler-unit: 3em;
	$r4-ruler-n: 6;
	$r4-ruler-end: 2.375em;
	$r4-ruler-line-w: 1px;
	$r4-ruler-line-h: .625em;
	$r4-ruler-bg: linear-gradient(90deg, #8a5509 $r4-ruler-line-w,
	transparent $r4-ruler-line-w) repeat-x;

	$r4-track-bw: 1em;
	$r4-track-w: $r4-ruler-n$r4-ruler-unit + 2$r4-ruler-end;
	$r4-track-h: 2.625em;
	$r4-track-shi: inset 1px 1px .125em #553117;
	$r4-track-sho: 0 1.1875em .25em -1.25em #000;
	$r4-track-bg-base:
	radial-gradient(at 100% 50%, rgba(#714505, 0) 65%, #714505 71%)
	no-repeat border-box,
	$r4-ruler-bg $r4-ruler-end 0 border-box,
	$r4-ruler-bg $r4-ruler-end 100% border-box,
	linear-gradient(#714505, #a0640e .125em) border-box;
	$r4-track-bg-base-size: $r4-track-h/2 $r4-track-h + .125em,
	$r4-ruler-unit $r4-ruler-line-h,
	$r4-ruler-unit $r4-ruler-line-h, 100%;
	$r4-track-bg-mid:
	linear-gradient(#70421e, #70421e) padding-box;
	$r4-track-bg-mid-size: 100%;

	$r4-thumb-d: 1em;
	$r4-thumb-bw: $r4-track-bw - $r4-thumb-d/2;

	$r4-fill-sf: ($r4-track-w - 2*$r4-track-bw)/$r4-track-w;
	$r4-fill-h: $r4-track-h - 2*$r4-track-bw;
	$r4-fill-sf2: ($r4-track-w - 2$r4-track-bw - $r4-thumb-d)/($r4-track-w - 2$r4-track-bw);

	$r4-input-h-k: 2;




	//* ===== ===== ===== FUNCTIONS & COMPUTATIONS ===== ===== ===== */


	//* ----- 1st slider ----- */
	@function r1-gen-ruler-cp() {}


	//* ----- 2nd slider ----- */
	@for $i from 0 through $tip-cp-n {
	$ang-curr: $tip-bubble-ang-ref + $i*$tip-cp-ang-base;

	@if $ang-curr >= $tip-bubble-ang-s and $ang-curr <= $tip-bubble-ang-e {
	$x: $tip-bubble-rx*(1 + cos($ang-curr));
	$y: $tip-bubble-ry*(1 + sin($ang-curr));
	$tip-cp: $tip-cp, $x $y !global;
	}
	}




	//* ===== ===== ===== MIXINS ===== ===== ===== */

	//* ----- Generic ----- */

	@mixin thumb-base() {
	box-sizing: border-box;
	border: solid 0 transparent;
	border-radius: 50%;
	cursor: ew-resize;
	}


	//* ----- 1st slider ----- */

	@mixin r1-track($flag: null) {
	width: $r1-track-w; height: $r1-track-h;
	border-radius: $r1-track-h/2;
	/* shadow not really visible in IE :( */
	box-shadow: 0 .25em if($flag == ms, 1px, .125em -.125em) #5c8520;
	background: $r1-track-bg;
	}

	@mixin r1-fill($flag: null) {
	height: $r1-track-h;
	border-radius: $r1-track-h/2;
	/* shadow not really visible in IE :( */
	box-shadow: 0 .25em if($flag == ms, 1px, .25em -.125em) #5c8520;
	background: $r1-fill-bg;
	}

	@mixin r1-thumb() {
	border-width: $r1-thumb-bw;
	padding: $r1-thumb-pad;
	width: $r1-thumb-d; height: $r1-thumb-d;
	background: linear-gradient(grey, grey) content-box,
	radial-gradient(circle at 25% 25%, #fbfbf9, #bfccad) padding-box;
	}


	//* ----- 2nd slider ----- */

	@mixin r2-track() {
	width: $r2-track-w; height: $r2-track-h;
	border-radius: $r2-track-h/2;
	box-shadow: inset 0 1px 1px #888;
	background: $r2-track-bg;
	}

	@mixin r2-fill() {
	height: $r2-track-h;
	border-radius: $r2-track-h/2;
	background: $r2-fill-bg;
	}

	@mixin r2-thumb() {
	border-width: $r2-thumb-bw;
	width: $r2-thumb-d; height: $r2-thumb-d;
	background:
	radial-gradient(#b4dbaf, #0e5401, #559149 3px,
	#73af67, #bff0b4, #abe29a 65%) padding-box,
	linear-gradient(-45deg, green, #6db04f) border-box #fff;
	filter: drop-shadow(1px .125em .125em rgba(#000, .4))
	}


	//* ----- 3rd slider ----- */

	@mixin r3-track() {
	width: $r3-track-w; height: $r3-track-h;
	border-radius: .375em;
	background: linear-gradient(#fff, #d5d5d5);
	}

	@mixin r3-thumb() {
	border-width: $r3-thumb-bw;
	padding: $r3-thumb-pad;
	width: $r3-ruler-unit; height: $r3-ruler-unit;
	border-radius: .25em + $r3-thumb-bw;
	box-shadow: inset 0 -1px #5f8323, inset -1px 0 #5f8323;
	opacity: .65;
	background:
	radial-gradient(circle, $r3-thumb-bar-c 69%, $r3-thumb-bar-caf 71%)
	no-repeat content-box,
	radial-gradient(circle, $r3-thumb-bar-c 69%, $r3-thumb-bar-caf 71%)
	no-repeat 100% 0 content-box,
	linear-gradient(90deg, transparent $r3-thumb-bar-r,
	$r3-thumb-bar-c $r3-thumb-bar-r,
	$r3-thumb-bar-c $r3-thumb-bar-w - $r3-thumb-bar-r,
	transparent $r3-thumb-bar-w - $r3-thumb-bar-r)
	no-repeat content-box,
	repeating-linear-gradient(90deg, $r3-thumb-line-caf, $r3-thumb-line-c 1px,
	$r3-thumb-line-caf 2px, $r3-thumb-line-caf $r3-thumb-bar-h)
	no-repeat 50% 100% content-box,
	linear-gradient(#9ece53, #77a330) padding-box;
	background-size:
	$r3-thumb-bar-h $r3-thumb-bar-h, $r3-thumb-bar-h $r3-thumb-bar-h,
	100% $r3-thumb-bar-h, 2.5*$r3-thumb-bar-h $r3-thumb-bar-h, 100%;

	.js & { opacity: .99; }
	}


	//* ----- 4th slider ----- */

	@mixin r4-track($flag: null) {
	box-sizing: border-box;
	border: solid $r4-track-bw transparent;
	width: $r4-track-w; height: $r4-track-h;
	border-radius: $r4-track-h/2;

	@if $flag == webkit {
	border-width: $r4-track-bw $r4-track-bw - $r4-thumb-d/2;
	box-shadow: $r4-track-sho;
	background: $r4-track-bg-base;
	background-size: $r4-track-bg-base-size;
	}
	@else {
	box-shadow: $r4-track-sho, $r4-track-shi;
	background: $r4-track-bg-mid, $r4-track-bg-base;
	background-size: $r4-track-bg-mid-size, $r4-track-bg-base-size;
	}
	}

	@mixin r4-fill() {
	border-radius: $r4-fill-h;
	background: linear-gradient(0deg, #374900 1px, #9fb634 1px, #d2e57e);
	}

	@mixin r4-thumb($flag: null) {
	@if $flag == webkit {
	width: $r4-thumb-d; height: $r4-thumb-d;
	}
	@else {
	border-width: $r4-thumb-bw;
	width: $r4-thumb-d + 2$r4-thumb-bw; height: $r4-thumb-d + 2$r4-thumb-bw;
	}
	padding: $r4-thumb-d/3;

	background:
	radial-gradient(at 65% 65%, #c1c1c1, #868887 70%) content-box,
	linear-gradient(#fff, #e1dad4) padding-box;
	filter: drop-shadow(1px 1px .125em rgba(#000, .5));
	}




	//* CSS */

	html {
	background: radial-gradient(#fabc4d, #eb7e15 70%) no-repeat #eb7e15;
	}

	input[type='range'] {
	&,
	&::-webkit-slider-runnable-track,
	&::-webkit-slider-thumb {
	-webkit-appearance: none;
	}

	display: block;
	margin: 2.5em auto;
	padding: 0; /* inconsistent */
	opacity: .75;
	background: transparent; /* inconsistent */
	/* font-size inconsistent */
	font: 1em $ff;
	cursor: pointer;

	&::-webkit-slider-runnable-track {
	position: relative; /* prep for creating rulers */
	}
	&::-webkit-slider-runnable-track, /deep/ #track {
	&:before, &:after { position: absolute; }
	}
	&::-ms-track {
	border: none; /* remove default border */
	color: transparent; /* remove dfault tick marks */
	}

	&::-webkit-slider-thumb {
	@include thumb-base();
	}
	&::-moz-range-thumb {
	@include thumb-base();
	}
	&::-ms-thumb {
	@include thumb-base();
	}

	&:nth-of-type(1) {
	border: solid 1px transparent;
	padding: 0 $r1-input-pad;
	width: $r1-track-w; height: $r1-input-h;
	border-radius: .25em;
	box-shadow:
	inset 0 1px 1px #c0ed78 /* top light line */,
	0 1px 1px #5f8f2f /* highlight bottom border */,
	/* not very god repro of bottom shadow :( */
	0 1em 2.25em -2.25em #000,
	0 1.125em 2.315em -2.315em #000,
	0 1.25em 2.375em -2.375em #000,
	0 1.375em 2.5em -2.5em #000;
	background:
	linear-gradient(90deg,
	$r1-ruler-c $r1-ruler-line-w, $r1-ruler-caf $r1-ruler-line-w)
	repeat-x $r1-thumb-d/2 50% content-box,
	linear-gradient(#98cb4c, #74a22f) padding-box,
	linear-gradient(#7da142, #5c8022) border-box;
	background-size: $r1-ruler-unit $r1-ruler-line-h, 100% 100%, 100% 100%;


	/* ------- the track ------- */
	&::-webkit-slider-runnable-track {
	@include r1-track();
	transform: translateY(-$r1-track-h);
	}
	&::-moz-range-track {
	@include r1-track();
	}
	&::-ms-track {
	@include r1-track(ms);
	}


	/* ------- the fill ------- */
	&::-webkit-slider-runnable-track, /deep/ #track {
	.js &:after {
	top: 0; left: 0;
	width: ($r1-val - 1)*$r1-ruler-unit + $r1-thumb-d/2;
	@include r1-fill();
	clip-path: inset(0 ($r1-thumb-d-inner/2) 0 0);
	content: '';
	}
	}
	.js &::-moz-range-track {
	background: $r1-fill-bg no-repeat, $r1-track-bg;
	background-size: ($r1-val - 1)*$r1-ruler-unit + $r1-thumb-d/2 100%;
	}
	&::-moz-range-progress {
	@include r1-fill();
	.js & { opacity: 0; }
	}
	&::-ms-fill-lower {
	@include r1-fill();
	}


	/* ------- the ruler ------- */
	&::-webkit-slider-runnable-track, /deep/ #track,
	&::-webkit-slider-thumb, /deep/ #thumb {
	&:before {
	position: absolute;
	top: 175%;
	left: 0; right: 0;
	color: $r1-ruler-c;
	font: #{$r1-ruler-fs*1em}/2 $ff;
	}
	}
	&::-webkit-slider-runnable-track, /deep/ #track {
	&:before {
	text-indent: $r1-thumb-d/2/$r1-ruler-fs - .3125em;
	word-spacing: $r1-ruler-unit/$r1-ruler-fs - .85em;
	content: '1 2 3 4 5 6 7 8 9';
	}
	}
	&::-webkit-slider-thumb, /deep/ #thumb {
	&:before {
	text-indent: ($r1-thumb-d/2 + 9*$r1-ruler-unit)/$r1-ruler-fs - .5em;
	word-spacing: $r1-ruler-unit/$r1-ruler-fs - 1.375em;
	content: '10 11 12 13';
	}
	}
	@for $i from $r1-ruler-min through $r1-ruler-max {
	&[value='#{$i}'] {
	&::-webkit-slider-runnable-track, /deep/ #track,
	&::-webkit-slider-thumb, /deep/ #thumb {
	.js &:before {
	$pos: ($r1-thumb-d/2 +
	($i - $r1-ruler-min)*$r1-ruler-unit)/$r1-ruler-fs;

	clip-path: polygon(0 0, $pos - 1em 0, $pos - 1em 100%,
	$pos + 1em 100%, $pos + 1em 0, 100% 0, 100% 100%, 0 100%);
	}
	}
	}
	}


	/* ------- the thumb ------- */
	&::-webkit-slider-thumb {
	margin-top: ($r1-track-h - $r1-thumb-d)/2;
	@include r1-thumb();
	}
	&::-moz-range-thumb {
	@include r1-thumb();
	}
	&::-ms-thumb {
	@include r1-thumb();
	}


	/* ------- the tip ------- */
	&::-webkit-slider-thumb, /deep/ #thumb {
	&:after {
	display: block;
	width: $r1-tip-w;
	transform: translate($r1-tip-pos-fix);
	color: $r1-ruler-c;
	font: 700 #{$r1-tip-fs*1em}/2.125 $ff;
	text-align: center;
	.js & { content: '#{$r1-val}'; }
	}
	}
	}


	&:nth-of-type(2) {
	padding: 0 $r2-input-pad;
	width: $r2-track-w; height: $r2-input-h;
	border-radius: .25em;
	box-shadow: inset 0 -1px #f1e4cc,
	1px 0 rgba(#db9b33, .95),
	0 .125em 1px rgba(#db9b33, .95);
	background: linear-gradient(#fff, #d7d7d7);


	/* ------- the track ------- */
	&::-webkit-slider-runnable-track {
	@include r2-track();
	transform: translateY(-$r2-track-h);
	}
	&::-moz-range-track {
	@include r2-track();
	}
	&::-ms-track {
	@include r2-track();
	}


	/* ------- the fill ------- */
	&::-webkit-slider-runnable-track, /deep/ #track {
	.js &:after {
	top: 0; left: 0;
	width: $r2-val*1%;
	@include r2-fill();
	content: '';
	}
	}
	&::-moz-range-progress {
	@include r2-fill();
	}
	&::-ms-fill-lower {
	@include r2-fill();
	}


	/* ------- the ruler ------- */
	&::-webkit-slider-runnable-track, /deep/ #track {
	&:before {
	top: 100%; left: 50%;
	transform: translate(-50%);
	color: #b0b0b0;
	font: #{$r2-ruler-fs*1em}/1.5 $ff;
	white-space: nowrap;
	word-spacing: $r2-track-w/$r2-ruler-fs - 4em;
	content: '0% 100%';
	}
	}


	/* ------- the thumb ------- */
	&::-webkit-slider-thumb {
	position: relative;
	z-index: 2;
	margin-top: ($r2-track-h - $r2-thumb-d)/2;
	@include r2-thumb();
	}
	&::-moz-range-thumb {
	@include r2-thumb();
	}
	&::-ms-thumb {
	@include r2-thumb();
	}


	/* ------- the tip ------- */
	&::-webkit-slider-thumb, /deep/ #thumb {
	&:after {
	position: absolute;
	right: 50%; bottom: 150%;
	width: $tip-w; height: $tip-h;
	transform: translate(25%);
	background: rgba(#fff, .5);
	color: #222;
	font: 900 #{$tip-fs1em}/(2.25$tip-bubble-rx) $ff;
	text-align: center;
	text-shadow: 0 0 1px rgba(#000, .25);
	clip-path: polygon($tip-cp);
	.js & { content: '#{$r2-val}%'; }
	}
	}
	}


	&:nth-of-type(3) {
	width: $r3-track-w; height: $r3-input-h-k*$r3-track-h;
	background: radial-gradient(rgba(#000, .5), transparent 70%)
	no-repeat 50% (($r3-input-h-k + 1)*$r3-track-h - $r3-input-sh-h)/2;
	background-size: 90% $r3-input-sh-h;


	/* ------- the track ------- */
	&::-webkit-slider-runnable-track {
	@include r3-track();
	}
	&::-moz-range-track {
	@include r3-track();
	}
	&::-ms-track {
	@include r3-track();
	}


	/* ------- the fill ------- */
	&::-ms-fill-lower { display: none; }


	/* ------- the ruler ------- */
	&::-webkit-slider-runnable-track, /deep/ #track {
	&:before, &:after {
	z-index: 1;
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	font: #{$r3-tip-fs*1em} / #{$r3-track-h/$r3-tip-fs} $ff;
	color: #777;
	text-shadow: 0 0 1px rgba(#555, .5);
	}
	&:before {
	text-indent: $r3-ruler-unit/2/$r3-tip-fs - .5em;
	word-spacing: 4*$r3-ruler-unit/$r3-tip-fs - 1.875em;
	content: '0% 100%';
	}
	&:after {
	text-indent: 3*$r3-ruler-unit/2/$r3-tip-fs - .8125em;
	word-spacing: $r3-ruler-unit/$r3-tip-fs - 1.875em;
	content: '25% 50% 75%';
	}
	}


	/* ------- the thumb ------- */
	&::-webkit-slider-thumb {
	position: relative;
	z-index: 2;
	margin-top: ($r3-track-h - $r3-ruler-unit)/2;
	@include r3-thumb();
	}
	&::-moz-range-thumb {
	@include r3-thumb();
	}
	&::-ms-thumb {
	@include r3-thumb();
	}


	/* ------- the tip ------- */
	&::-webkit-slider-thumb, /deep/ #thumb {
	&:after {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	color: #e7f5ce;
	font: #{$r3-tip-fs*1em} $ff;
	.js & { content: '#{$r3-val}%'; }
	}
	}
	}


	&:nth-of-type(4) {
	width: $r4-track-w; height: $r4-input-h-k*$r4-track-h;
	background: radial-gradient(rgba(#000, .65),
	rgba(#000, .35) 40%, transparent 70%)
	no-repeat 50% (($r4-input-h-k + 1)$r4-track-h - 2$r3-input-sh-h)/2;
	background-size: 90% 2*$r3-input-sh-h;


	/* ------- the track ------- */
	&::-webkit-slider-runnable-track {
	@include r4-track(webkit);
	}
	&::-webkit-slider-runnable-track, /deep/ #track {
	&:before, &:after {
	top: 0; left: $r4-thumb-d/2;
	width: $r4-track-w - 2*$r4-track-bw; height: $r4-fill-h;
	content: '';
	}
	&:before {
	border-radius: $r4-fill-h;
	box-shadow: $r4-track-shi;
	background: $r4-track-bg-mid;
	}
	}
	&::-moz-range-track {
	@include r4-track();
	}
	&::-ms-track {
	@include r4-track();
	}


	/* ------- the fill ------- */
	&::-webkit-slider-runnable-track, /deep/ #track {
	.js &:after {
	width: $r4-val*1%;
	@include r4-fill();
	transform-origin: 0 50%;
	transform: scaleX($r4-fill-sf2);
	content: '';
	}
	}
	&::-moz-range-progress {
	@include r4-fill();
	height: $r4-fill-h;
	border-radius: #{$r4-fill-h/2/$r4-fill-sf} / #{$r4-fill-h/2};
	transform-origin: 0 50%;
	transform: translate($r4-track-bw)
	scale($r4-fill-sf);
	}
	&::-ms-fill-lower {
	@include r4-fill();
	}


	/* ------- the thumb ------- */
	&::-webkit-slider-thumb {
	position: relative;
	z-index: 2;
	margin-top: ($r4-track-h - $r4-thumb-d)/2 - $r4-track-bw;
	@include r4-thumb(webkit);
	}
	&::-moz-range-thumb {
	@include r4-thumb();
	}
	&::-ms-thumb {
	@include r4-thumb();
	}


	/* ------- the tip ------- */
	&::-ms-tooltip { display: none; }
	}

	&:focus {
	outline: none;
	opacity: .99;
	}
	}

	input[type='range']:not(*:root):first-of-type {
	background-position: $r1-thumb-d/2 calc(50% - #{$r1-track-h}), 0 0, 0 0;
	}