当改变方向时,noui滑块按键错误

时间:2016-07-19 07:22:57

标签: javascript jquery nouislider

当我将我的nouislider设置为 ltr 时,它可以通过按键顺畅地上下移动。 http://jsfiddle.net/jeff_chung/L8md5251/

<div class="example">
    <div id="keypress" class="noUi-target noUi-ltr noUi-horizontal noUi-background">

    </div>
    <input type="text" id="input-with-keypress">
</div>
<script>
    var keypressSlider = document.getElementById('keypress'),
        input = document.getElementById('input-with-keypress');

    noUiSlider.create(keypressSlider, {
        start: 0.66,
        direction: 'ltr',
        connect: 'lower',
        range: {
            'min': [0.66, 0.22],
            '14.29%': [1, 0.33],
            '28.57%': [2, 0.67],
            '42.86%': [5, 1.67],
            '57.14%': [10, 3.33],
            '71.43%': [20, 6.67],
            '85.71%': [40, 13.33],
            'max': 80
        }
    });

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

    input.addEventListener('change', function() {
        keypressSlider.noUiSlider.set([null, this.value]);
    });
    // Listen to keydown events on the input field.
    input.addEventListener('keydown', function(e) {

        // Convert the string to a number.
        var value = Number(keypressSlider.noUiSlider.get()),
            sliderStep = keypressSlider.noUiSlider.steps()

        // Select the stepping for the first handle.
        sliderStep = sliderStep[0];

        // 13 is enter,
        // 38 is key up,
        // 40 is key down.
        switch (e.which) {
            case 13:
                keypressSlider.noUiSlider.set(this.value);
                break;
            case 38:
                keypressSlider.noUiSlider.set(value + sliderStep[1]);
                break;
            case 40:
                keypressSlider.noUiSlider.set(value - sliderStep[0]);
                break;
        }
    });
</script>

但是,如果我将其设置为 rtl ,则当它达到2时无法上下移动,但鼠标滚动时可以正常 http://jsfiddle.net/jeff_chung/po2rcj7z/1/

<div class="example">
    <div id="keypress" class="noUi-target noUi-ltr noUi-horizontal noUi-background">

    </div>
    <input type="text" id="input-with-keypress">
</div>
<script>
    var keypressSlider = document.getElementById('keypress'),
        input = document.getElementById('input-with-keypress');

    noUiSlider.create(keypressSlider, {
        start: 0.66,
        direction: 'rtl',
        connect: 'lower',
        range: {
            'min': [0.66, 0.22],
            '14.29%': [1, 0.33],
            '28.57%': [2, 0.67],
            '42.86%': [5, 1.67],
            '57.14%': [10, 3.33],
            '71.43%': [20, 6.67],
            '85.71%': [40, 13.33],
            'max': 80
        }
    });

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

    input.addEventListener('change', function() {
        keypressSlider.noUiSlider.set([null, this.value]);
    });
    // Listen to keydown events on the input field.
    input.addEventListener('keydown', function(e) {

        // Convert the string to a number.
        var value = Number(keypressSlider.noUiSlider.get()),
            sliderStep = keypressSlider.noUiSlider.steps()

        // Select the stepping for the first handle.
        sliderStep = sliderStep[0];

        // 13 is enter,
        // 38 is key up,
        // 40 is key down.
        switch (e.which) {
            case 13:
                keypressSlider.noUiSlider.set(this.value);
                break;
            case 38:
                keypressSlider.noUiSlider.set(value + sliderStep[1]);
                break;
            case 40:
                keypressSlider.noUiSlider.set(value - sliderStep[0]);
                break;
        }
    });
</script>

1 个答案:

答案 0 :(得分:1)

我认为您的代码没有任何问题,因为它遵循noUiSlider页面上的示例:

input.addEventListener('keydown', function( e ) {
    // Convert the string to a number.
    var value = Number( keypressSlider.noUiSlider.get() ),
        sliderStep = keypressSlider.noUiSlider.steps()

    // Select the stepping for the first handle.
    sliderStep = sliderStep[0];

    // 13 is enter,
    // 38 is key up,
    // 40 is key down.
    switch ( e.which ) {
        case 13:
            keypressSlider.noUiSlider.set(this.value);
            break;
        case 38:
            keypressSlider.noUiSlider.set( value + sliderStep[1] );
            break;
        case 40:
            keypressSlider.noUiSlider.set( value - sliderStep[0] );
            break;
    }
});

在我看来,原来的noUiSlider代码存在bug。按照原始示例,此小提琴http://jsfiddle.net/ubr37u5n/完美无缺,然而,将方向更改为 rtl 会导致与您遇到的行为相同,并且滑块将停留在的值300 ,你可以在这个小提琴http://jsfiddle.net/p6kkr2hv/中看到。

它以某种方式连接到非线性设置,当我删除此设置时,它开始使用 ltr rtl 这两个方向,如下所示:{ {3}}