带输出的Html范围滑块

Question

So I have been trying to create something similar to this, take note of example 1: Bootstrap Slider .

As you can see from the following example the output has the effect of being fixed onto the slider thumb, and using the bootstrap tooltip for styling.

Alignment: - I have seen other people attempt to create this effect but the output never seems to stay perfectly inline with the thumb as you slide it along, here is an example:

As a designer and front end developer it's important that designs are pixel perfect, so this being perfectly inline is a must.

The Bootstrap example works great but it uses a lot of javascript that I really don't need, I'm wanting to just use the HTML input element with the type="range" , and style it according with a little javascript to be functional.

This is what I have so 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 i = 0; i < 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 i = 0; i < 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 also included an external link of the code JS Bin

Any help would be greatly appreciated!!

Answer 1

What about making it track the mouse's x position over the span of the input element's width and setting its y position according to the input element's location in the document? See the snippet below. If anything, my answer is too smooth (actually smoother than the input itself which is slightly choppy). If you want it to follow the choppiness of the input, just do a little coding to change the px value into a percentage (as the input is) and go from there.

Otherwise, I think this is the answer you are looking for. Just change the styling to your preferences (I did a quick job just to make it actually work)

Oh and have the function run when the document is loaded and resized. That way it starts out in the right position and 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%'; for (var i = 0; i < 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 i = 0; i < 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 and clientX/Y are, // calculate pageX/Y - logic taken from jQuery. // (This is to 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> 

Answer 2

Check this link: https://css-tricks.com/value-bubbles-for-range-inputs/

This is the code

    <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src=https://rawgit.com/jeffshaver/styl.js/master/src/styl.min.js></script>
<style>

/*position container at the center*/
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

input[type=range] {
  -webkit-appearance: none; /*remove default style*/
  background: none;
}
/*style for track*/
input[type=range]::-webkit-slider-runnable-track {
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}

input[type=range]::-ms-track {
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}

input[type=range]::-moz-range-track {
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}
/*style for thumb*/

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #555;
  margin-top: -5px;
  position: relative;
}

input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #555;
  margin-top: -5px;
  position: relative;
}

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #555;
  margin-top: -5px;
  position: relative;
}
/*hide the outline behind the border*/
input[type=range]:focus {
  outline: none;
}
/*pseudo-element for the thumb*/
input[type=range]:focus::-webkit-slider-thumb:after {
  position: absolute;
  top: -35px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
    border: 10px solid transparent;
    border-bottom-color: #333;
    top: 100%;
    left: 50%;


}
input[type=range]:focus::-ms-thumb:after {
 position: absolute;
  top: -35px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
    border: 10px solid transparent;
    border-bottom-color: #333;
    top: 100%;
    left: 50%;


}
input[type=range]:focus::-moz-range-thumb:after {
  position: absolute;
  top: -35px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
    border: 10px solid transparent;
    border-bottom-color: #333;
    top: 100%;
    left: 50%;

}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

input[type=range]:focus::-ms-track {
  background: #ccc;
}

input[type=range]:focus::-moz-range-track {
  background: #ccc;
}

</style>
</head>
<body>
<div class="container">
  <input id="test" type="range" min="0" max="100" step="1" value="0"/>
</div>
<script type="text/javascript">
$('input[type="range"]').on('mouseup', function() {
  this.blur();
}).on('mousedown input', function() {/*on mousedown, the position of the thumb is set to content and this style is injected using styl.js*/
  styl.inject('input[type=range]:focus::-webkit-slider-thumb:after, input[type=range]:focus::-ms-thumb:after, input[type=range]:focus::-moz-range-thumb:after', {
    content: "'" + this.value + "'"
  }).apply();
});
</script>
</body>
</html>