在noUiSlider

Question

我使用带有一个手柄的noUiSlider，范围从0到50.我试图在滑块左侧的输入字段上显示滑块的增加值，并且值减小在右边 - 如下例所示：

Slider

有没有其他人试图这样做或知道如何实现？

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

我设法让左边的值显示在屏幕上，但不知道如何将它绑定到输入字段。而且我不知道如何在右边获得价值。我认为这应该是＆＃39; max value＆＃39;减去＆＃39;滑块值＆＃39;但是我没有足够的JavaScript知识，所以我真的很感激一些帮助：）

Answer 1

我和你一起玩过代码并且让它发挥作用：

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变量了，因为你可以查询滑块的最大范围数量，但我不记得这个代码。

Answer 2

我使用 0.99.0 物化 < 滑块 控制< / strong>版本，我也希望得到这种行为。所以我做了一些技巧如下：

表单标记中的我的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>");
    });
});

瞧，我们已经让魔术发生了，结果是这样的：

通过这种方式，我们可以捕获要在表单中发送的值或进行某些操作等。在这里您可以my pen作为参考。

我希望它对其他人有用。