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?