jquery滑块返回不一致的值

Question

以下是我骨干视图中的初始化事件。这里没什么了不起的，只需快速检查浏览器是否支持HTML5 range输入类型，如果没有附加jquery滑块。

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

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

相反，最右边的值很少是100，再次按照代码中的规定。下面的屏幕截图显示了最右边的滑块，其值为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滑块，解决了这个问题。