带输出

Question

所以我一直在尝试创建与此类似的内容，请注意示例1： Bootstrap Slider 。

从以下示例中可以看出，output具有固定在滑块上的效果，并使用 bootstrap tooltip 进行样式化。

对齐： - 我已经看到其他人试图创建这种效果，但output似乎永远不会与拇指完全保持一致，这是一个例子：

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

Bootstrap示例效果很好，但它使用了很多我真正不需要的javascript，我只想使用带有type="range"的HTML输入元素，并根据它设置样式用一点点javascript来实现功能。

这是我到目前为止所拥有的：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我还添加了代码 JS Bin

的外部链接

非常感谢任何帮助!!

Answer 1

如何让它在输入元素宽度范围内跟踪鼠标的x位置，并根据输入元素在文档中的位置设置其y位置？请参阅下面的代码段。如果有的话，我的答案太顺利了（实际上比输入本身更平滑，稍微不稳定）。如果你想让它跟随输入的不连续性，只需做一点编码就可以将px值改为百分比（就像输入一样）并从那里开始。

否则，我认为这是您正在寻找的答案。只需根据您的喜好更改样式（我做了一个快速的工作，只是为了让它真正起作用）

哦，并且在加载文档并调整其大小时运行该函数。这样它就会从正确的位置开始并保持在那里

＆＃13;

＆＃13;

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}
        }
    }
})();

＆＃13;

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: " ";
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>