prettify `<input type=range>` #43

index.html

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

prettify-`<input-type=range>`-#43.markdown

prettify <input type=range> #43

You can see the rest of my 1 range input sliders in this collection.

Goal: create a nicely styled cross-browser 1 element slider. Tested & works in Firefox 35, 38 (nightly), Chrome 40, 42 (canary)/ Opera 28, IE 11 on Windows 8. IE doesn't need the JS, Firefox and Chrome/ Opera rely on it a bit for styling the range track. Chrome/ Opera have a bit of an extra, the end labels at the ends of the track. This is done using /deep/ - careful, experimental stuff, the spec has already changed, uncertain future in Chrome (link #1, link #2). Fallback for no JS: simply display the same background for the entire track, both before and after the thumb and no end labels.

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:

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 s = document.createElement('style'), 
    r = document.querySelector('input[type=range]'), 
    prefs = ['webkit-slider-runnable', 'moz-range'];

document.body.appendChild(s);

var getTrackStyleStr = function(el, val) {
  var str = '', len = prefs.length;
  
  for(var i = 0; i < len; i++) {
    str += '.js input[type=range]::-' + prefs[i] + 
      '-track{background-size:' + val + '}';
  }
    
  return str;
};

var getValStr = function(el, p) {
  var min = el.min || 0, 
      p = p || el.value, 
      perc = (el.max) ? ~~(100*(p - min)/(el.max - min)) : p, 
      val = (100 - perc) + '% 100%,cover';
  
  return val;
};

r.addEventListener('input', function() {
  s.textContent = getTrackStyleStr(this, getValStr(this));
}, false);

style.scss

@import "compass/css3";
$input-pad: 3em;
$input-w: 23em;
$input-h: 2.5em;

$track-h: 1.875em;
$input-sh: 
  inset 0 1px .125em #000, 
  inset 0 -1px .125em #707070;
$track-fill: url(http://imgsrc.hubblesite.org/hu/db/images/hs-2013-17-a-large_web.jpg) 50% 50%;
$track-cover: linear-gradient(rgba(#111, .97), rgba(#111, .97)) no-repeat 100% 0;

@mixin track($fill: true) {
  border: none;
  width: $input-h - 2*$input-pad; height: $track-h;
  border-radius: $track-h/2;
  
  @if $fill {
    .js & {
      background: $track-cover, $track-fill;
      background-size: (100 - 70)*1% 100%, cover;
    }
  }
  @else {
    background: rgba(#111, .32);
  }
}

@mixin thumb() {
  border: none;
  width: $track-h; height: $track-h;
  border-radius: 50%;
  box-shadow: 
    inset 0 0 .125em #eee, 
    0 .125em .25em #000;
  background: 
    radial-gradient(at 50% 0, #666, rgba(#666, 0) 70%) no-repeat 50% 0, 
    radial-gradient(at 0 100%, #111, rgba(#111, 0) 70%) no-repeat 0 90%, 
    radial-gradient(at 100% 100%, #111, rgba(#111, 0) 70%) no-repeat 100% 90%, 
    radial-gradient(transparent .25em, #fcfefe .3125em);
  background-size: 65% 50%, 50% 65%, 50% 65%, 100% 100%;
}

html, body { height: 100%; }

body {
  display: flex;
  justify-content: space-around;
  margin: 0;
  background: 
    radial-gradient(rgba(#4a4a4a, .32), rgba(#0d0d0d, .85)), 
    url(http://i.imgur.com/If8HEIj.jpg);
}

input[type='range'] {
  &,
  &::-webkit-slider-runnable-track, 
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
  }
  
  
  align-self: center;
  box-sizing: border-box;
  padding: 0 $input-pad;
  width: 23em; height: $input-h;
  border-radius: $input-h/2;
  box-shadow: $input-sh;
  background: rgba(#000, .75);
  font-size: 1em;
  cursor: pointer;
  
  
  /* slider components */
  &::-webkit-slider-runnable-track {
    @include track();
  }
  &::-moz-range-track {
    @include track();
  }
  &::-ms-track {
    @include track(false);
    color: transparent;
  }
  &::-ms-fill-lower {
    border-radius: $track-h/2;
    background: $track-fill;
    background-position: 0 50%;
  }
  
  &::-webkit-slider-thumb {
    @include thumb();
  }
  &::-moz-range-thumb {
    @include thumb();
  }
  &::-ms-thumb {
    @include thumb();
  }
  
  &::-ms-tooltip { display: none; }
  
  /deep/ #track {
    $fs: .75;
    
    position: relative;
    
    &:before, &:after {
      position: absolute;
      top: 0;
      width: $input-pad/$fs;
      color: #555;
      font: 600 #{$fs*1em} / #{$track-h/$fs} arial, sans-serif;
      text-align: center;
    }
    
    &:before {
      right: 100%;
      content: '0px'
    }
    &:after {
      left: 100%;
      content: '100px'
    }
  }
  
  /* slider states */
  &:focus {
    outline: none;
    box-shadow: 0 0 .125em purple, $input-sh;
  }
}