Question

我是Javascript的完全新手，我已经使用了一个演示html滑块，一切正常;

＆＃13;

var slider = document.getElementById("myRange");
var output = document.getElementById("first");
output.innerHTML = slider.value;

slider.oninput = function() {
output.innerHTML = this.value;
}

＆＃13;

<div class="slidecontainer">
    <input type="range" min="50" max="<?php echo round($widthhugemm); ?>" value="50" class="slider" id="myRange">
	  <p>
      Size: <span id="first"></span>mm
    </p>
</div>

＆＃13;

我现在想要从滑块值生成第二个值，这个值将取决于所选的值 - 所以不是第二个滑块手柄 - 我想从变量执行简单的乘法并将其输出到第二个跨度这样的ID;

Size: <span id="first"></span>mm x <span id="second">mm</span>

我已经能够通过创建新变量和跨度ID来复制getElementByID来创建第二个输出，我只是无法弄清楚如何对初始滑块值执行乘法并创建新值（变量）答案并输出。

我希望所有有意义的事情，并提前感谢所提供的任何帮助！

Answer 1

HTML5 range input只接受一个输入！您可以使用类似jQuery UI range滑块的内容来执行该任务。

Answer 2

我想出了这个：

<input type="range" name="range" min="50" max="100" id="range" /><br>

<span id="first"></span> x <span id="second"></span>
<script type="text/javascript">
    var r = document.getElementById('range');
    var first = document.getElementById('first');
    var sec = document.getElementById('second');
    flag = true;
    r.oninput = function(){
        first.innerHTML = this.value;
        second.innerHTML = this.value;
    }
</script>

然后我想你只需要这个

Answer 3

通过这种方式，您可以了解它是如何工作的，因为您是一名大三学生，但它肯定不是更优化的方式！

var slider = document.getElementById("myRange");
var first = document.getElementById("first");
var second = document.getElementById("second");

first.innerHTML = slider.value;
second.innerHTML = slider.value * 2;

slider.oninput = function() {
  first.innerHTML = this.value;
  second.innerHTML = this.value * 2;
}

<div class="slidecontainer">
    <input type="range" min="50" max="<?php echo round($widthhugemm); ?>" value="50" class="slider" id="myRange">
	  <p>
      Size: <span id="first"></span>mm * <span id="second"></span>mm
    </p>
</div>

从html范围滑块

3 个答案: