Как подключить 2 ползунка Ion.RangeSlider?

Question

[Maksim Ivanov]

Подскажите как подключить вот таких 2 ползунка на одной странице?
https://jsfiddle.net/IonDen/avcm6wpj/

Comments

[0xD34F]

было

[Maksim Ivanov]

и как такой пример вставить в верстку в 2 разных блока? Можно правильно продублировать скрипт инициализации? по тому примеру что я скинул

Answer 1

[Maksim Ivanov]

разобрался сам)) вот пример может кому еще пригодится - продублировал код инициализации и заменил повторные переменные. Может можно как-то правильнее сделать, если кто знает напишите пожалуйста

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