2

我尝试从以下位置连接几个范围滑块：http: //ionden.com/a/plugins/ion.rangeSlider/en.html，以便第一个滑块的末尾自动识别为第二个滑块的修复开始，依此类推。此外，这应该即时更新。我当前的代码只能部分工作 - 连接工作（即使它不是固定的），但实时更新不起作用。

附上代码：

from = 0, 
to = 0;
from2 = 0,
to2 = 0;

var saveResult = function (data) {
    from = data.from;
    to = data.to;
};

var writeResult = function () {
    var result = from;
    $result.html(result);
};

var saveResult2 = function (data) {
    from2 = data.from;
    to2 = data.to;
};

var writeResult2 = function () {
    var result2 = from2;
    $result.html(result);
};




$("#select-length").ionRangeSlider({
    hide_min_max: true,
    keyboard: true,
    min: 0,
    max: 20,
    from: 0,
    to: 10,
    type: 'double',
    step: 0.25,
    prefix: "",
    grid: true,
    onStart: function (data) {
        saveResult(data);
        writeResult();
    },
    onChange: function(data){
        saveResult(data);
        writeResult();
    },
    onChange: saveResult,
    onFinish: saveResult
});

$("#select-length2").ionRangeSlider({
    hide_min_max: true,
    keyboard: true,
    min: 0,
    max: 20.16,
    from: to,
    to: 12,
    type: 'double',
    step: 0.25,
    prefix: "",
    grid: true,
    onStart: function (data) {
        saveResult2(data);
        writeResult2();
    },
    onChange: function(data){
        saveResult2(data);
        writeResult2();
    },
    onChange: saveResult2,
    onFinish: saveResult2
});

$("#select-length3").ionRangeSlider({
    hide_min_max: true,
    keyboard: true,
    min: from2,
    max: 20.16,
    from: 12,
    to: 12,
    type: 'double',
    step: 0.25,
    prefix: "",
    grid: true
});
4

1 回答 1

0

Ion.RangeSlider 实时更新是这样做的：http: //jsfiddle.net/IonDen/4k3d4y3s/

var $range1 = $(".js-range-slider-1"),
    $range2 = $(".js-range-slider-2"),
    range_instance_1,
    range_instance_2;

$range1.ionRangeSlider({
    type: "single",
    min: 100,
    max: 1000,
    from: 500,
    onChange: function (data) {
        range_instance_2.update({
            from: data.from
        });
    }
});
range_instance_1 = $range1.data("ionRangeSlider");

$range2.ionRangeSlider({
    type: "single",
    min: 100,
    max: 1000,
    from: 500,
    onChange: function (data) {
        range_instance_1.update({
            from: data.from
        });
    }
});
range_instance_2 = $range2.data("ionRangeSlider");
于 2015-11-11T11:04:09.373 回答