noUiSlider

Question

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

在初始化时工作正常。

但是在更新时它获得了最后一个初始化的滑块标签，这很明显:) 但是我能否以某种方式在 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();

还没弄明白。

一个运行问题的小提琴可以在这里看到：Fiddle

Answer 1

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

如果将代码重构为运行闭包中的所有滑块初始化，则每个滑块可以具有唯一的 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();

并更新了 jsFiddle。

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

noUiSlider - Get current slider in format or via update event

javascript