javascript - 连接范围 slider Jquery

Question

我尝试连接多个范围 slider :http://ionden.com/a/plugins/ion.rangeSlider/en.html以便第一个 slider 的结束位置被自动识别为第二个 slider 的固定开始位置，依此类推。此外，这应该动态更新。我当前的代码仅部分有效 - 连接有效(即使未修复)，但实时更新不起作用。

附上代码:

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
});

Answer 1

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");