Javascript noUiSlider-以格式或通过更新事件获取当前滑块

我有多个由document.querySelectorAll（“.js slider”）定义的滑块； 在tooltips.format上，我想在值上方插入一个标签，该值通过数据标签在当前幻灯片对象上定义

在init上，这很好

但在更新时，它会得到最后一个初始化的滑块标签，这很明显：） 但是，我是否可以在tooltips.format或更新事件中获取当前滑块对象或id，或者获取当前滑块的设置对象

var uiSlider = {
init : function() {
    var rangeInputs = document.querySelectorAll( '.js-slider' );
    uiSlider.setup( rangeInputs );
},
setup : function( sliders ) {
    var len = sliders.length,
        slider, min, max, step, value, range, start, postfix, pipValues, label, settings;

    function data( element , value ){
        return parseFloat( element.getAttribute( 'data-' + value ) );
    }

    while( len-- ) {            
        slider = sliders[len];                  
        min = data( slider,'min' );
        max = data( slider,'max' );
        step = data( slider,'step' );
        value = data( slider, 'value' );
        range = !isNaN( min ) && !isNaN( max ) ? { 'min': min, 'max': max } : { 'min': 0, 'max': 100 };
        start = !isNaN( value ) ? value : 0;
        postfix = slider.getAttribute( 'data-postfix' );
        pipValues = slider.getAttribute( 'data-pipvalues' ) ? slider.getAttribute( 'data-pipvalues' ).split( ',' ) : null;
        label =  slider.getAttribute( 'data-label' );
        settings = {
            start: start,
            step: !isNaN( step ) ? step : 1,
            connect: "lower",
            tooltips: {
                format: function( value, handle, settings ) {

                    var dformat = wNumb({
                        decimals: 0,
                        thousand: ',',
                        prefix: '<span class="noUi-tooltip__label">' + label + '</span>',
                        postfix: ( postfix ? ' ' + postfix : ' $' )
                    }); 

                    return dformat.to( parseFloat( value ) );
                }
            },
            range: range,
            pips: { // Show a scale with the slider
                mode: 'positions',
                values: pipValues ? pipValues : [ 0, 20, 40, 60, 80, 100 ],
                density: 2,
                format: wNumb({
                    decimals: 0,
                    thousand: ','
                })
            },
            format: wNumb({
                decimals: 0
            })
        };

        noUiSlider.create( slider, settings );

    }
}
};

uiSlider.init();

var-uiSlider={
init:function（）{
var rangeInputs=document.querySelectorAll（'.js slider'）；
uiSlider.设置（范围输入）；
},
设置：功能（滑块）{
var len=滑块长度，
滑块、最小值、最大值、步长、值、范围、开始、后缀、pipValues、标签、设置；
函数数据（元素、值）{
返回parseFloat（element.getAttribute（'data-'+value））；
}
而（len--）{
滑块=滑块[len]；
最小值=数据（滑块，'min'）；
最大值=数据（滑块，“最大值”）；
步骤=数据（滑块，“步骤”）；
值=数据（滑块“值”）；
范围=！isNaN（最小值）&&！isNaN（最大值）{'min'：min，'max'：max}:{'min'：0，'max'：100}；
开始=！isNaN（值）？值：0；
postfix=slider.getAttribute（'datapostfix'）；
pipValues=slider.getAttribute（'data pipValues'）？slider.getAttribute（'data pipValues'）。拆分（'，'）：null；
label=slider.getAttribute（‘数据标签’）；
设置={
开始：开始，
步骤：！isNaN（步骤）？步骤：1，
连接：“降低”，
工具提示：{
格式：函数（值、句柄、设置）{
var dformat=wNumb({
小数：0，
千:",",，
前缀：“”+标签+“”，
后缀：（后缀？“”+后缀：“$”）
}); 
返回dformat.to（parseFloat（value））；
}
},
范围:范围,，
点子：{//用滑块显示比例
模式：“位置”，
值：pipValues？pipValues:[0,20,40,60,80,100]，
密度：2，
格式：wNumb({
小数：0，
千:",
})
},
格式：wNumb({
小数：0
})
};
创建（滑块、设置）；
}
}
};
uiSlider.init（）；

我还没能弄明白这一点

---

这里可以看到问题的一个正在运行的Fiddel：

发生这种情况是因为您在所有滑块之间共享一个“label”变量

如果重构代码以在闭包中运行所有滑块初始化，则每个滑块都可以有唯一的

标签

变量

最简单的方法是在滑块列表中使用

forEach

，例如使用

Array.prototype.forEach.call（sliders，function（slider））

您的代码已重构：

var uiSlider = {
    init : function() {
        var rangeInputs = document.querySelectorAll( '.js-slider' );
        uiSlider.setup( rangeInputs );
    },
    setup : function( sliders ) {

        function data( element , value ){
            return parseFloat( element.getAttribute( 'data-' + value ) );
        }

        Array.prototype.forEach.call(sliders, function ( slider ) {

            var min = data( slider,'min' ),
                max = data( slider,'max' ),
                step = data( slider,'step' ),
                value = data( slider, 'value' ),
                range = !isNaN( min ) && !isNaN( max ) ? { 'min': min, 'max': max } : { 'min': 0, 'max': 100 },
                start = !isNaN( value ) ? value : 0,
                postfix = slider.getAttribute( 'data-postfix' ),
                pipValues = slider.getAttribute( 'data-pipvalues' ) ? slider.getAttribute( 'data-pipvalues' ).split( ',' ) : null,
                label =  slider.getAttribute( 'data-label' );

            noUiSlider.create(slider, {
                start: start,
                step: !isNaN( step ) ? step : 1,
                connect: "lower",
                tooltips: {
                    format: function( value, handle, settings ) {

                        var dformat = wNumb({
                            decimals: 0,
                            thousand: ',',
                            prefix: '<span class="noUi-tooltip__label">' + label + '</span>',
                            postfix: ( postfix ? ' ' + postfix : ' $' )
                        }); 

                        return dformat.to( parseFloat( value ) );
                    }
                },
                range: range,
                pips: { // Show a scale with the slider
                    mode: 'positions',
                    values: pipValues ? pipValues : [ 0, 20, 40, 60, 80, 100 ],
                    density: 2,
                    format: wNumb({
                        decimals: 0,
                        thousand: ','
                    })
                },
                format: wNumb({
                    decimals: 0
                })
            });
        });
    }
};

uiSlider.init();

var-uiSlider={
init:function（）{
var rangeInputs=document.querySelectorAll（'.js slider'）；
uiSlider.设置（范围输入）；
},
设置：功能（滑块）{
函数数据（元素、值）{
返回parseFloat（element.getAttribute（'data-'+value））；
}
Array.prototype.forEach.call（滑块、函数（滑块）{
var min=数据（滑块，'min'），
最大值=数据（滑块，“最大值”），
步骤=数据（滑块，“步骤”），
值=数据（滑块“值”），
范围=！isNaN（最小值）&&！isNaN（最大值）{'min'：min，'max'：max}:{'min'：0，'max'：100}，
开始=！isNaN（值）？值：0，
postfix=slider.getAttribute（'data postfix'），
pipValues=slider.getAttribute（'data pipValues'）？slider.getAttribute（'data pipValues'）。拆分（'，'）：null，
label=slider.getAttribute（‘数据标签’）；
创建（滑块{
开始：开始，
步骤：！isNaN（步骤）？步骤：1，
连接：“降低”，
工具提示：{
格式：函数（值、句柄、设置）{
var dformat=wNumb({
小数：0，
千:",",，
前缀：“”+标签+“”，
后缀：（后缀？“”+后缀：“$”）
}); 
返回dformat.to（parseFloat（value））；
}
},
范围:范围,，
点子：{//用滑块显示比例
模式：“位置”，
值：pipValues？pipValues:[0,20,40,60,80,100]，
密度：2，
格式：wNumb({
小数：0，
千:",
})
},
格式：wNumb({
小数：0
})
});
});
}
};
uiSlider.init（）；

和更新的。
Thanx Leon。正是我想要的：）