连接范围滑块Jquery

Question

我尝试从以下位置连接几个范围滑块： 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
});

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