CODEWITHSUNDEEP
javascription-range-slider
Tarilonte
Tarilonte

Reputation: 61

How to prevent click on interval in Ion.RangeSlider?

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.

Upvotes: 0

Views: 552

Answers (2)

Christian
Christian

Reputation: 11

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

Upvotes: 1

Que
Que

Reputation: 524

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.

Upvotes: 0

Related Questions