項目需要，頁面上增加了2個slider控件用于設置range和limit，用的是jQuery UI官方的Slider：

但是我沒有直接使用他的代碼，因為我覺得寫的不是很好，所以我自己寫了一下，沒想到出現了一些問題，就是在鼠標拖拽的過程中，數值更新不正常：

function updateDateRange(event, ui) {
    var slider = event.target;
    var values = $(slider).slider("values");
    this.find(".amount-date-range-start").val(values[0]);
    this.find(".amount-date-range-end").val(values[1]);
    this.find(".date-range-desc").text("from week " + values[0] + " to week " + values[1]);
}

function updateRecordCountLimit(event, ui) {
    var slider = event.target;
    var val = $(slider).slider("value");
    this.find(".amount-record-count-limit").val(val);
    this.find(".record-count-limit-desc").text(val);
}

function initPanel(panel, id) {
    $('a[href="#{id}"]'.replace('{id}', id)).click();
    panel.find(".slider-record-count-limit").slider({
        range: "max",
        min: 1,
        max: 500,
        value: 25,
        create: _.bind(updateRecordCountLimit, panel),
        slide: _.bind(updateRecordCountLimit, panel),
    });

    panel.find(".slider-date-range", panel).slider({
        range: true,
        min: 1,
        max: 60,
        values: [1, 25],
        create: _.bind(updateDateRange, panel),
        slide: _.bind(updateDateRange, panel),
    });

經過一番調試，發現是slide消息響應函數即updateXXX，不應該使用slider("value"）來獲取值，而是應該通過ui.value來獲取，將代碼改寫，就OK了：

function updateDateRange(event, ui) {
    var slider = event.target;
    var values = (ui && ui.values) ? ui.values : $(slider).slider("values");
    this.find(".amount-date-range-start").val(values[0]);
    this.find(".amount-date-range-end").val(values[1]);
    this.find(".date-range-desc").text("from week " + values[0] + " to week " + values[1]);
}

function updateRecordCountLimit(event, ui) {
    var slider = event.target;
    var val = (ui && ui.value) ? ui.value : $(slider).slider("value");
    this.find(".amount-record-count-limit").val(val);
    this.find(".record-count-limit-desc").text(val);
}

function initPanel(panel, id) {
    $('a[href="#{id}"]'.replace('{id}', id)).click();
    panel.find(".slider-record-count-limit").slider({
        range: "max",
        min: 1,
        max: 500,
        value: 25,
        create: _.bind(updateRecordCountLimit, panel),
        slide: _.bind(updateRecordCountLimit, panel),
    });

    panel.find(".slider-date-range", panel).slider({
        range: true,
        min: 1,
        max: 60,
        values: [1, 25],
        create: _.bind(updateDateRange, panel),
        slide: _.bind(updateDateRange, panel),
    });

總結

以上是生活随笔為你收集整理的jQuery UI 控件之Slider的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。