在 noUiSlider 上显示递增和递减值答案

【问题标题】：Show increasing and decreasing values on noUiSlider在 noUiSlider 上显示递增和递减值
【发布时间】：2017-07-05 10:14:30
【问题描述】：

我正在使用一个 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

我设法让左边的值显示在屏幕上，但不知道如何将它绑定到输入字段。而且我不知道如何获得右边的价值。我认为这应该是“最大值”减去“滑块值”，但对 JavaScript 没有足够的了解，所以我非常感谢一些帮助:)

【问题讨论】：

标签： javascript nouislider

【解决方案1】：

我正在使用 0.99.0 Materialize 的 Slider 控件> 版本，我也想获得这种行为。所以我做了一些技巧如下：

我在表单标签中的 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 供参考。

我希望它对其他人有用。

【讨论】：

【解决方案2】：

我玩过你的代码并得到了这个工作：

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

【讨论】：