配置 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>&nbsp; <span id="halfvalue"></span></h3>然后将附加代码添加到事件处理程序代码中：var output = document.querySelectorAll('output')[0];var halfvalue = document.querySelector('#halfvalue');$(document).on('input', 'input[type="range"]', function(e) {&nbsp; output.innerHTML = e.currentTarget.value;&nbsp; halfvalue.innerHTML = e.currentTarget.value / 2});