jquery 滑块返回不一致的值

Question

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

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

例如，我来回滑动滑块，starting/ending 值永远不会等于代码中指定的 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 滑块，问题就解决了。

jquery 滑块返回不一致的值

jquery slider returning inconsistent values

html

javascript

css

jquery

backbone.js