RangeSlider, чтобы показать несколько выходных - PullRequest
Новая
       7

RangeSlider, чтобы показать несколько выходных

0 голосов
/ 25 сентября 2018

Мне удается получить один вывод, но я хочу показать несколько выводов, когда пользователь скользит.Как этого добиться?

Каждый выход имеет различное значение, скажем, 1x, 1,2x, 1,5x, 1,3x и 1,75x

JSFiddle Demo 

$('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 ]

0 голосов
/ 25 сентября 2018 
$('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 .. и т. Д.).

После этого вы повторяете тот же процесс для получения значения путем доступа к _multipliers[i-1], поскольку индексы основаны на 0.

Это решение является универсальным, если все «выходы» сохраняют одинаковые обозначенияи формат.

Fiddle: https://jsfiddle.net/jadckr71/6/

Примечание: унарный оператор + перед многими "$" должен приводить переменную к числу, чтобы не было рискабудет строкой и каким-то образом будет объединен.

0 голосов
/ 25 сентября 2018

Просто обновите все 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>
...