How to prevent click on interval in Ion.RangeSlider?

Question

In Ion.RagerSlider plugin the interval bar is clickable. This is an issue on mobile devices when the user accidentally click the element when he's trying to scroll.

How can i disable the click event on interval bar?

I was unable to find the solution in the official documentation.

Does this help ? : http://ionden.com/a/plugins/ion.rangeSlider/api.html#a_interval — Towkir, Apr 22 '19 at 17:59
@Towkir Unfortunately no. None of those methods disables the interval click. — Tarilonte, Apr 22 '19 at 18:38
can you add a snippet that shows the problem and elaborate your question a bit pls ? — Towkir, Apr 22 '19 at 18:39

Christian · Answer 1 · 2023-02-25T12:46:02.477

1

This one works perfectly for me. Just add to css:

ion-range {
  pointer-events: none;
}

ion-range::part(knob) {
  pointer-events: auto;
}

Seems to work on most browsers. Have a look here: https://caniuse.com/pointer-events

edited Feb 25 '23 at 12:46

answered Feb 25 '23 at 12:42

Christian

11
2

score 0 · Answer 2 · answered May 15 '20 at 14:31

I am facing the same issue where, if tapping outside the selected range on the bar, the whole range gets shifted across to the tap location. Depending on the location and size of the bar on the screen, it is quite easy to inadvertently do this and lose the slider values.

While it is not officially supported by version 2.3.1, I found that removing the binding of touchstart and mousedown events to the range line did the trick. https://github.com/IonDen/ion.rangeSlider/blob/2.3.1/js/ion.rangeSlider.js#L686#L687

A more generic approach could be to create a new config parameter named something like disable_line_touch with a default value of false, and only skip the above binding if its value is set to true.

How to prevent click on interval in Ion.RangeSlider?

2 Answers2