帶輸出的Html范圍滑塊

Question

所以我一直在嘗試創建類似於此的東西，請注意示例1： Bootstrap Slider 。

從下面的示例中可以看出， output具有固定到滑塊上的效果，並使用引導工具提示進行樣式設置。

對齊方式： - 我已經看到其他人嘗試創建此效果，但output似乎永遠不會與拇指保持完美內聯，這是一個示例：

作為設計師和前端開發人員，重要的是設計是像素完美的，所以這是完美的內聯是必須的。

Bootstrap示例工作得很好，但它使用了很多我真正不需要的javascript，我只想使用type="range"的HTML輸入元素，並根據一些小的javascript來設置它的功能。

這是我到目前為止：

 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> 

我還包含了代碼JS Bin的外部鏈接

任何幫助將不勝感激！！

Answer 1

如何讓它在輸入元素寬度的范圍內跟蹤鼠標的x位置，並根據輸入元素在文檔中的位置設置其y位置？ 請參閱下面的代碼段。 如果有的話，我的答案太順利了（實際上比輸入本身更平滑，稍微不穩定）。 如果你想讓它跟隨輸入的不連續性，只需做一點編碼就可以將px值改為百分比（如輸入所示）並從那里開始。

否則，我認為這是你正在尋找的答案。 只需根據您的喜好更改樣式（我做了一個快速的工作，只是為了讓它真正起作用）

哦，並在加載和調整文檔大小時運行該函數。 這樣它就會從正確的位置開始並保持在那里

 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

請訪問此鏈接： https ： //css-tricks.com/value-bubbles-for-range-inputs/

這是代碼

    <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>