$track-u: $track-w/$track-k;
$thumb-sh-i: inset 0 0 .125em #515354;
$thumb-sh-o: 0 0 1px #6a7277, 0 0 .125em #6a7277;
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;
linear-gradient(to left top, rgba(#8f999d, .5), rgba(#b3babe, .5))
$thumb-base-s: 100% $track-bw, $track-bw 100%;
$ruler-w: ($track-k - 2)*$track-u + $ruler-line-w;
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;
$shape-l-h: $shape-r .375em .75em 1.25em $shape-h - $shape-r;
$shape-r ($thumb-w - $shape-top-w)/2 - $shape-r
($thumb-w - $shape-top-w)/2 + $shape-r
($thumb-w + $shape-top-w)/2 - $shape-r
($thumb-w + $shape-top-w)/2 + $shape-r $thumb-w - $shape-r;
-180deg, 60deg, -180deg, -135deg, -45deg, 180deg, -60deg, 0deg, 90deg;
-120deg, 0deg, -135deg, -45deg, 0deg, 120deg, 0deg, 90deg, 180deg;
$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);
(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;
$ox + $shape-r*cos($ca) $oy + $shape-r*sin($ca);
border: solid $track-bw transparent;
width: $track-w; height: $track-h;
border-radius: $track-h/2;
inset 0 .125em .125em rgba(#5b7382, .98),
inset 0 .1875em .125em rgba(#374953, .75),
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,
@mixin thumb($flag: false) {
width: $shape-top-w; height: $shape-h;
drop-shadow(0 0 1px rgba(#ddd, .98))
drop-shadow(0 0 3px rgba(#000, .98));
border: solid $track-bw transparent;
width: $thumb-w;height: $thumb-h;
$thumb-sh-o, $thumb-sh-i;
background: $thumb-base-bg, $thumb-sp-bg;
background-size: $thumb-base-s, $thumb-sp-s;
radial-gradient($root-main-c, rgba($root-main-c, 0) 50%),
linear-gradient(to right bottom, #3d7195, $root-main-c, $root-sec-c);
&::-webkit-slider-runnable-track,
&::-webkit-slider-thumb {
-webkit-appearance: none;
border: solid 0 transparent;
width: $track-w; height: $input-h;
transform: translate(-50%, -50%);
background-position: 50% ($input-h - $track-h)/2 - $ruler-h;
background-size: $ruler-w $ruler-h;
&::-webkit-slider-runnable-track {
&::-ms-fill-lower { display: none; }
&::-webkit-slider-thumb {
clip-path: polygon($shape-cp);
&::-webkit-slider-runnable-track, /deep/ #track {
bottom: calc(100% + #{$ruler-h/$ruler-fs}); left: 0;
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 {
transform: translate(-50%);
border: solid $track-bw transparent;
border-top-width: nth($shape-l-h, 4);
width: $thumb-w; height: $shape-h;
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%,
bottom: $track-bw/$thumb-fs;
font: 600 #{$thumb-fs*1em} / 1.375 arial, sans-serif;
box-shadow: 0 0 .25em grey;
background-color: rgba($root-main-c, .35);