Question

我设法获得一个输出，但是我想在用户滑动时显示多个输出。我该如何实现？

每个输出的值分别为1x，1.2x，1.5x，1.3x和1.75x

$('input[type="range"]').rangeslider({polyfill: false});
$('#range').on("input", function() {
$('.output1').val("$"+this.value);
}).trigger("change");

output {
  display: block;
}

<link href="https://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.min.js"></script>
<input type="range"  name="range" id="range" value="100" step="25" min="1" max="1100">
    <br />
    <output class="output1">100</output>
    <output class="output2">120</output>
    <output class="output3">150</output>
    <output class="output4">130</output>
    <output class="output5">175</output>

Answer 1

$('input[type="range"]').rangeslider({polyfill: false});

var _multipliers = [
    1,2,3,4,5
].map(function(i){
    return (+$('.output'+i).val() / 100);
});

$('#range').on("input", function() {
  var _value = +this.value;
  [1,2,3,4,5].forEach(function(i){
    $('.output'+i).val("$"+ ((1 + _multipliers[i-1]) * _value).toFixed(2));
  });

}).trigger("change");

在这种情况下，您可以通过首先从映射图中获取值来预先计算乘数。简而言之，使用.map，您将获得所有初始值并将它们除以100，这样就可以从中得到乘数（100-> 1，120-> 1.2 ..依此类推）。< / p>

此后，由于索引从0开始，因此您通过访问_multipliers[i-1]重复相同的过程以获取值。

只要所有“输出”保持相同的符号和格式，此解决方案便具有多种用途。

提琴：https://jsfiddle.net/jadckr71/6/

注意：在许多“ $”之前的一元运算符+会将变量强制转换为数字，这样就不会有将其作为字符串并以某种方式连接的风险。

Answer 2

只需更改output即可更新所有range值：

$('input[type="range"]').rangeslider({polyfill: false});
$('#range').on("input", function() {
$('.output1').val("$"+parseFloat(this.value*1).toFixed(2));
$('.output2').val("$"+parseFloat(this.value*1.2).toFixed(2));
$('.output3').val("$"+parseFloat(this.value*1.3).toFixed(2));
$('.output4').val("$"+parseFloat(this.value*1.5).toFixed(2));
$('.output5').val("$"+parseFloat(this.value*1.75).toFixed(2));
}).trigger("change");

代码段：

$('input[type="range"]').rangeslider({polyfill: false});
$('#range').on("input", function() {
$('.output1').val("$"+parseFloat(this.value*1).toFixed(2));
$('.output2').val("$"+parseFloat(this.value*1.2).toFixed(2));
$('.output3').val("$"+parseFloat(this.value*1.3).toFixed(2));
$('.output4').val("$"+parseFloat(this.value*1.5).toFixed(2));
$('.output5').val("$"+parseFloat(this.value*1.75).toFixed(2));
}).trigger("change");

output {
  display: block;
}

<link href="https://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.min.js"></script>
<input type="range"  name="range" id="range" value="100" step="25" min="1" max="1100">
    <br />
    <output class="output1">100</output>
    <output class="output2">120</output>
    <output class="output3">150</output>
    <output class="output4">130</output>
    <output class="output5">175</output>

RangeSlider显示多个输出

2 个答案: