HTML5 - Range Multiple Hanldes

by zerrax

HTML

<div class='multi-range' data-lbound='1990' data-ubound='2019'>
    <hr />
    <input type='range' 
           min='1990' max='2018' step='1' value='1990' 
           oninput='this.parentNode.dataset.lbound=this.value;'
    />
    <input type='range' 
           min='1991' max='2019' step='1' value='2019' 
           oninput='this.parentNode.dataset.ubound=this.value;'
    />
</div>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background:#282828;
  font-family: sans-serif;
  padding: 40px;
}
.multi-range, .multi-range * { border:0;box-sizing: border-box; padding: 0; margin: 0; }
.multi-range { 
    position: relative; width: 160px; height: 28px; margin: 16px;
    border: 1px solid #ddd; font-family: monospace; border:0;
}
.multi-range > hr { position: absolute; width: 100%; top: 50%;}
.multi-range > input[type=range] {
    width: calc(100% - 16px); 
    position: absolute; bottom: 6px; left: 0;
}
.multi-range > input[type=range]:last-of-type { margin-left: 16px; }
.multi-range > input[type=range]::-webkit-slider-thumb { transform: translateY(-18px);}
.multi-range > input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none; height: 0px; }
.multi-range > input[type=range]::-moz-range-thumb { transform: translateY(-18px); }
.multi-range > input[type=range]::-moz-range-track { -webkit-appearance: none; height: 0px; }
.multi-range > input[type=range]::-ms-thumb { transform: translateY(-18px);   background: #666;}
.multi-range > input[type=range]::-ms-track { -webkit-appearance: none; height: 0px; }
.multi-range::after { 
    content: attr(data-lbound) ' - ' attr(data-ubound); 
    position: absolute; top: 0; left: 100%; white-space: nowrap;
    display: block; padding: 0px 4px; margin: -1px 2px;
    height: 26px; width: auto; border: 1px solid #ddd; 
    font-size: 13px; line-height: 26px; border:0
}
.multi-range > input[type=range]::-webkit-slider-thumb:hover {
  background: #fff;
}