Placing an ion-range inside ion-slide

Ionic Framework Ionic Angular
1

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?

2

Can you reproduce this on Stackblitz? You can use a template like this: https://stackblitz.com/edit/ionic-4-angular-8-start-template

3

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.

4

https://ionic-4-template.stackblitz.io

5

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…

6

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>
7

solved my problem … Thank you very much