javascript - 带输出的 HTML 范围 slider

Question

所以我一直在尝试创建与此类似的东西，请注意示例 1: Bootstrap Slider .

正如您从以下示例中看到的那样，输出 具有固定到 slider 拇指上并使用 bootstrap tooltip 的效果。 用于样式。

对齐方式: - 我已经看到其他人试图创建这种效果，但是当您滑动它时，输出 似乎永远不会与拇指完美地保持一致，这是一个示例:

作为设计师和前端开发人员，像素完美的设计非常重要，因此完美内联是必须的。

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>