2

http://ionden.com/a/plugins/ion.rangeSlider/en.htmlからいくつかの範囲スライダーを接続して、最初のスライダーの終わりが 2 番目の修正開始として自動的に認識されるようにします。さらに、これはその場で更新する必要があります。私の現在のコードは部分的にしか機能しません-接続は機能しますが（修正されていなくても）、リアルタイム更新は機能していません。

コードを添付：

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 に答える