Notes

HTML kodları;

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

-------------------------------------------------------------------


CSS kodları;

$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);
}
}


------------------------------------------------------------


Javascript Kodları;

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);