Qtrain
3/29/2015 - 10:35 PM
1 element slider
1 element slider
@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;
}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);
}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.
<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' />