I don’t usually post on forums but i ran into an issue where I had to use an ion-range inside an ion-slide… My problem is when trying to change the value of the range bar (sliding the value) the page also slides producing unwanted behavior. Any thoughts on this?
1 Like
Can you reproduce this on Stackblitz? You can use a template like this: https://stackblitz.com/edit/ionic-4-angular-8-start-template
In my experience, swiper (the library that powers ion-slides) is extremely greedy about events. It does not like having any components inside it that need to respond to user input. So I do everything I can to move any reactive components outside the slides component.
I kind of want my interactive components inside my slider. I was thinking of using a different library for the slide feature perhaps something like of slick slider…
As a workaround you could lock the slides on focus:
async lockSwipes(lock: boolean) {
await this.slides.lockSwipes(lock);
}
<ion-range (ionBlur)="lockSwipes(false)" (ionFocus)="lockSwipes(true)"></ion-range>
1 Like
solved my problem … Thank you very much