连接范围滑块 Jquery

Connect range slider Jquery

本文关键字：Jquery 范围 连接      更新时间：2023-09-26

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

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");
相关文章：