我设法得到一个输出,但我想在用户滑动时显示多个输出。我怎样才能做到这一点?
每个输出都有不同的值,比如 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>
最佳答案
在 range
发生变化时简单地更新所有 output
值:
$('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>
关于javascript - RangeSlider 显示多个输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52502757/