Показывать увеличивающиеся и убывающие значения на noUiSlider

Я использую noUiSlider с одним дескриптором и диапазоном от 0 до 50. Я пытаюсь показать увеличивающееся значение ползунка в поле ввода слева от ползунка и уменьшающееся значение справа - как в ниже пример:

Слайдер

Кто-нибудь еще пробовал это сделать или знает, как этого добиться?

var connectSlider = document.getElementById('slider');

noUiSlider.create(connectSlider, {
start: 20,
tooltips: true,
decimals: 0,
connect: [true, false],
range: {
  'min': 0,
  'max': 50,
},
  format: wNumb ({decimals:0})
}); 

var inputFormat = document.getElementById('slider-value');

 sliderFormat.noUiSlider.on('update', function( values, handle ) {
inputFormat.value = values[handle];
});

inputFormat.addEventListener('change', function(){
sliderFormat.noUiSlider.set(this.value);
});
$("#slider").Link('lower').to('#slider-value',function(value){
$(this).val(Math.abs(value));
});

Вот он в jsfiddle.

Мне удалось получить левое значение для отображения на экране, но я не знаю, как привязать его к полю ввода. И я не знаю, как получить правильную ценность. Я предполагаю, что это должно быть «максимальное значение» минус «значение слайдера», но у меня недостаточно знаний о JavaScript, поэтому я был бы очень признателен за помощь с этим :)


javascript nouislider
person Dorothy Kerrin Ryan    schedule 30.04.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я работаю с элементом управления Slider из версии 0.99.0 Materialize и Я тоже хотел добиться такого же поведения. Итак, я делаю следующие трюки:

Мой HTML в теге формы:

<div class="input-field col s12">
    <label for="wmAttendance">Porcentaje de Asistencias</label><br>
    <p class="range-field">
        <input type="range" id="test5" min="0" max="100" oninput="wAttendance.value = test5.value" />
        <output id="wAttendance" name="wAttendance">0<span>% - Mujeres</span></output>
        <output id="mAttendance" name="mAttendance" class="right">0<span>% - Hombres</span></output>
    </p>
</div>

JS необходим для перехвата изменений на входе диапазона

$(document).ready(function() {
    $("#test5").on("input", function() {
        var women = this.value, men = 100 - women;
        $("#a_women").html(women);
        $("#a_men").html(men);
        $("#wAttendance").html(women + "<span>% - Mujeres</span>");
        $("#mAttendance").html(men + "<span>% - Hombres</span>");
    });
});

И вуаля, у нас есть волшебство, и результат будет примерно таким: введите описание изображения здесь

Таким образом, мы можем поймать оба значения для отправки в форму или для выполнения некоторых операций и т. Д. Здесь у вас есть < strong> my pen для справки.

Я надеюсь, что это может быть полезно для кого-то другого.

person alexventuraio    schedule 05.07.2017

arrow_upward
0
arrow_downward

Я поигрался с вашим кодом и заработал:

var connectSlider = document.getElementById('slider');

// add max amount variable (used to calculate #slider-value-after input value)
var maxAmount = 50

noUiSlider.create(connectSlider, {
    start: 20,
    tooltips: true,
    decimals: 0,
    connect: [true, false],
    range: {
      'min': 0,
      'max': maxAmount, // use max amount variable to set max range amount
    },
  format: wNumb ({decimals:0})
}); 


var inputFormat = document.getElementById('slider-value');
// created variable for #slider-value-after input
var inputFormat2 = document.getElementById('slider-value-after');

// for some reason you were looking for a 'sliderFormat' variable to watch for slider updates
// this wasnt created and was causing JS errors in the fiddle 
// Ive updated this to the 'connectSlider' variable you created.
connectSlider.noUiSlider.on('update', function( values, handle ) {
    // on update set first input value
    inputFormat.value = values[handle];
    // also set #slider-value-after input value by minus'ing the max value by current slider value
    inputFormat2.value = maxAmount - values[handle];
});

inputFormat.addEventListener('change', function(){
    connectSlider.noUiSlider.set(this.value);
});

Я думаю, что также можно получить параметры слайдера, которые устранят необходимость устанавливать переменную maxAmount, поскольку вместо этого вы можете запросить максимальное значение диапазона ползунков, но я не могу вспомнить код для этого.

person NickMcB    schedule 30.06.2017