Multiple slider on the same page

[yansusanto]

Hi, I'm hoping someone may point me in the right direction as to what I'm trying to achieve here.

                var $range = $(".range-slider"),
                    $from = $("#min"),
                    $to = $("#max"),
                    instance,
                    min = 0,
                    max = 1000,
                    from = 0,
                    to = 0;

                $range.ionRangeSlider({
                    onStart: updateData,
                    onChange: updateData,
                    onFinish: updateData,
                });

                instance = $range.data("ionRangeSlider");

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

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

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

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

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

                    $(this).prop("value", val);
                });

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

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

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

                    $(this).prop("value", val);
                });

Say I have another slider, do I need to create a new set of `onChange' function to target the specific slider. Just couldn't wrap my head around this.

Any pointer is much appeciated.

[IonDen]

Hi, yes you can create multiple sliders on 1 page. Just follow this demo: https://jsfiddle.net/IonDen/f1t6qpx0/

[yansusanto]

Thanks for the response, @IonDen

Yes, I did create 2 sliders with different ids. So you're saying this is what we have to do

$range.ionRangeSlider({
      onStart: updateData,
      onChange: updateData,
      onFinish: updateData,
});

$range2.ionRangeSlider({
      onStart: updateData2,
      onChange: updateData2,
      onFinish: updateData2,
});

Is this the correct workflow?

[IonDen]

You have basic idea.

[yansusanto]

@IonDen Thank you.

If I'm using the above js, may I know why I'm getting this console error. Am I missing something here?

Everything works fine though

[IonDen]

e.ionRangeSlider? what is e?