How to connect 2 Ion.RangeSlider sliders?

  • 0
    Tell me how to connect these 2 sliders on one page?
    https://jsfiddle.net/IonDen/avcm6wpj/
    JavaScript Anonymous, Aug 14, 2019

  • 1 Answers
  • 0
    figured it out myself)) here's an example, maybe someone else will come in handy - I duplicated the initialization code and replaced the repeated variables. Maybe you can do something more correct, if anyone knows please write

    $(function () {
    // start $range1

    var $range = $(".js-range-slider-1"),
    $inputFrom = $(".js-input-from-1"),
    $inputTo = $(".js-input-to-1"),
    instance,
    min = 0,
    max = 5.25,
    from = 0,
    to = 0;

    $range.ionRangeSlider({
    skin: "round",
    type: "double",
    grid: true,
    min: min,
    max: max,
    from: 0,
    to: 5.25,
    step: 0.01,
    onStart: updateInputs,
    onChange: updateInputs
    });
    instance = $range.data("ionRangeSlider");

    function updateInputs (data) {
    from = data.from;
    to = data.to;

    $inputFrom.prop("value", from);
    $inputTo.prop("value", to);
    }

    $inputFrom.on("input", function () {
    var val = $(this).prop("value");

    // validate
    if (val < min) {
    val = min;
    } else if (val > to) {
    val = to;
    }

    instance.update({
    from: val
    });
    });

    $inputTo.on("input", function () {
    var val = $(this).prop("value");

    // validate
    if (val < from) {
    val = from;
    } else if (val > max) {
    val = max;
    }

    instance.update({
    to: val
    });
    });

    // end $range1

    // start $range2

    var $range2 = $(".js-range-slider-2"),
    $inputFrom2 = $(".js-input-from-2"),
    $inputTo2 = $(".js-input-to-2"),
    instance2,
    min2 = 0,
    max2 = 5.25,
    from2 = 0,
    to2 = 0;

    $range2.ionRangeSlider({
    skin: "round",
    type: "double",
    grid: true,
    min: min2,
    max: max2,
    from: 0,
    to: 5.25,
    step: 0.01,
    onStart: updateInputs2,
    onChange: updateInputs2
    });
    instance2 = $range2.data("ionRangeSlider");

    function updateInputs2 (data) {
    from2 = data.from;
    to2 = data.to;

    $inputFrom2.prop("value", from2);
    $inputTo2.prop("value", to2);
    }

    $inputFrom2.on("input", function () {
    var val = $(this).prop("value");

    // validate
    if (val < min2) {
    val = min2;
    } else if (val > to2) {
    val = to2;
    }

    instance2.update({
    from: val
    });
    });

    $inputTo2.on("input", function () {
    var val = $(this).prop("value");

    // validate
    if (val < from2) {
    val = from2;
    } else if (val > max2) {
    val = max2;
    }

    instance2.update({
    to: val
    });
    });

    // end $range2
    });
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!