javascript - Html range slider with output -

so have been trying create similar this, take note of example 1: bootstrap slider.

as can see following example output has effect of being fixed onto slider thumb, , using bootstrap tooltip styling.

alignment: - have seen other people attempt create effect output never seems stay inline thumb slide along, here example:

as designer , front end developer it's important designs pixel perfect, being inline must.

the bootstrap example works great uses lot of javascript don't need, i'm wanting use html input element type="range", , style according little javascript functional.

this have far:

var r = document.queryselectorall('input[type=range]'),       prefs = ['webkit-slider-runnable', 'moz-range'],       styles = [],       l = prefs.length,      n = r.length;    var gettrackstylestr = function(el, j) {    var str = '',         min = el.min || 0,         perc = (el.max) ? ~~(100*(el.value - min)/(el.max - min)) : el.value,         val = perc + '% 100%';      for(var = 0; < l; i++) {      str += "input[type=range][data-rangeid='" + j + "']::-" + prefs[i] + '-track{background-size:' + val + '} ';    }    return str;  };    var setdragstylestr = function(evt) {    var trackstyle = gettrackstylestr(evt.target, this);     styles[this].textcontent = trackstyle;  };    for(var = 0; < n; i++) {    var s = document.createelement('style');    document.body.appendchild(s);    styles.push(s);    r[i].setattribute('data-rangeid', i);    r[i].addeventlistener('input', setdragstylestr.bind(i), false);  }    function outputupdate(value) {  document.queryselector('#slider').value = value;  }

html {    background: #393939;  }    input[type='range'] {    display: block;    margin: 2.5em auto;    border: solid .5em transparent;    padding: 0;    width: 15.5em;    height: 1em;    border-radius: .25em;    background: transparent;    font-size: 1em;    cursor: pointer;  }  input[type='range'],   input[type='range']::-webkit-slider-runnable-track,   input[type='range']::-webkit-slider-thumb {    -webkit-appearance: none;  }  input[type='range']::-webkit-slider-runnable-track {    width: 15.5em;    height: 0.5em;    border-radius: 0.25em;    background: #fff;  }  input[type='range']::-webkit-slider-runnable-track {    background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;  }  input[type='range']::-moz-range-track {    width: 15.5em;    height: 0.5em;    border-radius: 0.25em;    background: #fff;  }  input[type='range']::-moz-range-track {    background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;  }  input[type='range']::-ms-track {    border: none;    width: 15.5em;    height: 0.5em;    border-radius: 0.25em;    background: #fff;    color: transparent;  }  input[type='range']::-ms-fill-lower {    border-radius: 0.25em;    background: #e44e4f;  }  input[type='range']::-webkit-slider-runnable-track {    background-size: 0% 100%;  }  input[type='range']::-moz-range-track {    background-size: 0% 100%;  }  input[type='range']::-webkit-slider-thumb {    margin-top: -0.125em;    border: none;    width: 0.75em;    height: 0.75em;    border-radius: 50%;    box-shadow: 0 0 0.125em #333;    background: #fff;  }  input[type='range']::-moz-range-thumb {    border: none;    width: 0.75em;    height: 0.75em;    border-radius: 50%;    box-shadow: 0 0 0.125em #333;    background: #fff;  }  input[type='range']::-ms-thumb {    border: none;    width: 0.75em;    height: 0.75em;    border-radius: 50%;    box-shadow: 0 0 0.125em #333;    background: #fff;  }  input[type='range']::-ms-tooltip {    display: none;  }  input[type='range']:focus {    outline: none;    box-shadow: 0 0 0.25em #e44e4f;  }  output {      color: white;  }

    <div>        <input id="range" type="range" value="0" oninput="outputupdate(value)">        <output for=range id=slider>0</output>      </div>      <div><input type="range" value="0"></div>      <div><input type="range" value="0"></div>

i have included external link of code js bin

any appreciated!!

what making track mouse's x position on span of input element's width , setting y position according input element's location in document? see snippet below. if anything, answer smooth (actually smoother input choppy). if want follow choppiness of input, little coding change px value percentage (as input is) , go there.

otherwise, think answer looking for. change styling preferences (i did quick job make work)

oh , have function run when document loaded , resized. way starts out in right position , remains there

var r = document.queryselectorall('input[type=range]'),      prefs = ['webkit-slider-runnable', 'moz-range'],      styles = [],      l = prefs.length,      n = r.length;    var gettrackstylestr = function (el, j) {      var str = '',          min = el.min || 0,          perc = (el.max) ? ~~ (100 * (el.value - min) / (el.max - min)) : el.value,          val = perc + '% 100%';        (var = 0; < l; i++) {          str += "input[type=range][data-rangeid='" + j + "']::-" + prefs[i] + '-track{background-size:' + val + '} ';      }      return str;  };    var setdragstylestr = function (evt) {      var trackstyle = gettrackstylestr(evt.target, this);      styles[this].textcontent = trackstyle;  };    (var = 0; < n; i++) {      var s = document.createelement('style');      document.body.appendchild(s);      styles.push(s);      r[i].setattribute('data-rangeid', i);      r[i].addeventlistener('input', setdragstylestr.bind(i), false);  }    var mousedown = false;  var el = document.queryselector("#slider");  var input = document.queryselector("#this");    function outputupdate(value) {      el.value = value;      el.style.top = input.offsettop + 30 + "px";  }    (function () {      document.onmousemove = handlemousemove;        function handlemousemove(event) {          var dot, eventdoc, doc, body, pagex, pagey;            event = event || window.event; // ie-ism            // if pagex/y aren't available , clientx/y are,          // calculate pagex/y - logic taken jquery.          // (this support old ie)          if (event.pagex === null && event.clientx !== null) {              eventdoc = (event.target && event.target.ownerdocument) || document;              doc = eventdoc.documentelement;              body = eventdoc.body;                event.pagex = event.clientx + (doc && doc.scrollleft || body && body.scrollleft || 0) - (doc && doc.clientleft || body && body.clientleft || 0);              event.pagey = event.clienty + (doc && doc.scrolltop || body && body.scrolltop || 0) - (doc && doc.clienttop || body && body.clienttop || 0);          }          if (mousedown) {              if (event.pagex < input.offsetleft + 14) {                  el.style.left = input.offsetleft + "px";              } else if (event.pagex > input.offsetleft + input.clientwidth) {                  el.style.left = input.offsetleft + input.clientwidth - 14 + "px";              } else {                  el.style.left = event.pagex - 15 + "px";              }              // use event.pagex / event.pagey here}          }      }  })();

html {    background: #393939;  }    input[type='range'] {    display: block;    margin: 2.5em auto;    border: solid .5em transparent;    padding: 0;    width: 15.5em;    height: 1em;    border-radius: .25em;    background: transparent;    font-size: 1em;    cursor: pointer;  }  input[type='range'],   input[type='range']::-webkit-slider-runnable-track,   input[type='range']::-webkit-slider-thumb {    -webkit-appearance: none;  }  input[type='range']::-webkit-slider-runnable-track {    width: 15.5em;    height: 0.5em;    border-radius: 0.25em;    background: #fff;  }  input[type='range']::-webkit-slider-runnable-track {    background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;  }  input[type='range']::-moz-range-track {    width: 15.5em;    height: 0.5em;    border-radius: 0.25em;    background: #fff;  }  input[type='range']::-moz-range-track {    background: linear-gradient(#e44e4f, #e44e4f) no-repeat #fff;  }  input[type='range']::-ms-track {    border: none;    width: 15.5em;    height: 0.5em;    border-radius: 0.25em;    background: #fff;    color: transparent;  }  input[type='range']::-ms-fill-lower {    border-radius: 0.25em;    background: #e44e4f;  }  input[type='range']::-webkit-slider-runnable-track {    background-size: 0% 100%;  }  input[type='range']::-moz-range-track {    background-size: 0% 100%;  }  input[type='range']::-webkit-slider-thumb {    margin-top: -0.125em;    border: none;    width: 0.75em;    height: 0.75em;    border-radius: 50%;    box-shadow: 0 0 0.125em #333;    background: #fff;  }  input[type='range']::-moz-range-thumb {    border: none;    width: 0.75em;    height: 0.75em;    border-radius: 50%;    box-shadow: 0 0 0.125em #333;    background: #fff;  }  input[type='range']::-ms-thumb {    border: none;    width: 0.75em;    height: 0.75em;    border-radius: 50%;    box-shadow: 0 0 0.125em #333;    background: #fff;  }  input[type='range']::-ms-tooltip {    display: none;  }  input[type='range']:focus {    outline: none;    box-shadow: 0 0 0.25em #e44e4f;  }  output {    color: white;    background-color: red;    padding: 5px 10px;    position: absolute;  }  output::before {    width: 0;  height: 0;  border-style: solid;  border-width: 0 5px 10px 5px;  border-color: transparent transparent #ff0000 transparent;    position: absolute;    top: -10px;    content: " ";  }

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script><div>      <input id="this" type="range" value="0" onmousedown="mousedown = true;" onmouseup="mousedown = false;" oninput="outputupdate(value)">      <output for="range" id="slider">0</output>  </div>  <div><input type="range" value="0"></div>  <div><input type="range" value="0"></div>