代码之家 › 专栏 › 技术社区 › Elaine Byene

显示多个输出的范围滑块

rangeslider jquery javascript

1

Elaine Byene · 技术社区 · 6 年前

我设法得到一个输出,但我想显示多个输出作为用户幻灯片。我怎样才能做到这一点?

每个输出具有不同的值,例如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>

2 回复 | 直到 6 年前

1

2

NullPointer 6 年前

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>

2

briosheje 6 年前

$('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->1120->1.2.. 以此类推)。

然后,通过访问 _multipliers[i-1] ,因为索引是基于0的。

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

注:一元运算符 + 在许多之前,“$”是将变量转换为一个数字,这样就不会有将它转换为字符串并以某种方式连接起来的风险。