配置 Javascript 范围滑块

Question

我这里有一个非常简单的范围滑块： https: //jsfiddle.net/dv45kseb/我希望能够动态显示 50% 的滑块值，但<h3>我不确定是否要开始。body {  color: #404040;  padding: 50px;  max-width: 500px;  margin: 0 auto;  text-align: center;  font-family: sans-serif;}h1 {  font-weight: 300;}#helper {  float: left;  margin-top: 20px;  color: #46b7d5;  font-style: italic;}output {  display: block;  font-size: 3em;}/* original css */.rangeslider,.rangeslider__fill {  display: block;  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);  -moz-border-radius: 10px;  -webkit-border-radius: 10px;  border-radius: 10px;}.rangeslider {  background: #e6e6e6;  position: relative;}.rangeslider--horizontal {  height: 20px;  width: 100%;}.rangeslider--vertical {  width: 20px;  min-height: 150px;  max-height: 100%;}.rangeslider--disabled {  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);  opacity: 0.4;}.rangeslider__fill {  background: -webkit-linear-gradient(left, #abe0ed, #46b7d5);  /* For Safari 5.1 to 6.0 */  background: -o-linear-gradient(right, #abe0ed, #46b7d5);  /* For Opera 11.1 to 12.0 */  background: -moz-linear-gradient(right, #abe0ed, #46b7d5);  /* For Firefox 3.6 to 15 */  background: linear-gradient(to right, #abe0ed, #46b7d5);  /* Standard syntax (must be last) */  position: absolute;}.rangeslider--horizontal .rangeslider__fill {  top: 0;  height: 100%;}.rangeslider--vertical .rangeslider__fill {  bottom: 0;  width: 100%;}

Answer 1

这部分代码就是修改header中的值的地方：

  $(document).on('input', 'input[type="range"]', function(e) {
    output.innerHTML = e.currentTarget.value;
  });

你只需要像这样划分你的值： output.innerHTML = e.currentTarget.value / 2;

Answer 2

为了完成答案 - 任何时候您需要通过 JavaScript 在页面中动态填充值，您都可以用 SPAN 标记和 ID 属性将其括起来（因为 ID 是唯一的）。所以：

<h3>

  <span id="halfvalue"></span>

</h3>

然后将附加代码添加到事件处理程序代码中：

var output = document.querySelectorAll('output')[0];

var halfvalue = document.querySelector('#halfvalue');

$(document).on('input', 'input[type="range"]', function(e) {

  output.innerHTML = e.currentTarget.value;

  halfvalue.innerHTML = e.currentTarget.value / 2

});