javascript - jquery slider 返回不一致的值

Question

下面是我主干 View 中的初始化事件。这里没什么特别的，只是快速检查浏览器是否支持 HTML5 range 输入类型，如果不支持则附加 jquery slider 。

当我只是使用 HTML range slider 时，在普通浏览器(即 Chrome、Firefox、IE10+)中一切正常。但是，如果我使用 jquery slider ，我会得到始终不一致的值。

例如，我来回滑动 slider ，开始/结束值永远不会等于代码中指定的 0 或 100。相反，您会看到类似下面的屏幕截图的内容，其中返回值等于 5，尽管句柄已尽可能向左移动。

相反，最右边的值很少是 100，这也是代码中指定的。下面的屏幕截图显示了 slider 最右边的位置，值为 82

var SliderView = Backbone.View.extend({
    el: $("#inputElements"),

    initialize: function() {
        if (!Modernizr.inputtypes.range) {
            //IE9 or less
            $('td#sliderContainer input#slider').remove();
            $('td#sliderContainer span').after("<div id='slider'></div>");
            $('#slider').slider({
                range: true,
                step: 1,
                min: 0,
                max: 100,
            });
        } else {
            //People friendly browsers so... for now carry on
        }
    },

    events: {
        "slide": "updateJquerySliderVal", //Captures jquery slide event for IE9 or less
        "input #slider": "updateSliderVal" //Captures HTML5 range slider input            
    },

    updateJquerySliderVal: function() {
        var val = this.$el.find('#slider').slider('option', 'value');
        console.log(val);
        this.model.set({ slidervalue: val });
    },

    updateSliderVal: function() {
        var val = this.$el.find('#slider').val();
        this.model.set({ slidervalue: val });
    }
});

Answer 1

切换到 rangeslider.js ，而不是标准的 jQuery slider ，解决了这个问题。