Range in ion-slides Ionic2 - range

Question

I have some troubles with setting range sliders inside ion-slides components.
Indeed, when I'm trying to swipe values of range, ionic detects I'm trying to swipe to another slide.
So I've two questions :
Is there a simple way to implement a range inside a ion-slide content with possibility to set data with range sliders without swiping to another slide and at the opposite, possibility to swipe to another slide without impacting range values.
If there isn't any simple way to do this, I've tried to changing direction of swipe to go to another slide, and according to the documentation I've tried it but I've compile error :
SyntaxError: /my/path/diagnostic.js: Unexpected token (8:18) while parsing file: /my/path/diagnostic.js so the error is targetting this line : diagnosticSlides = {
Here my code :
diagnostic.js
import {Page, NavController, NavParams, Slides} from 'ionic-angular';
#Page({
templateUrl: 'build/pages/diagnostic/diagnostic.html'
})
export class DiagnosticPage {
// Code for changing swiping direction -- not working
diagnosticSlides = {
initialSlide: 1,
loop: false,
direction: 'vertical'
};
static get parameters() {
return [[NavController], [NavParams]];
}
constructor(nav, navParams) {
this.nav = nav;
}
}
diagnostic.html
<ion-slides [options]="diagnosticSlides" pager>
<ion-slide style="background-color: blue">
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
</ion-slide>
<ion-slide style="background-color: red">
<h2>Other slide</h2>
</ion-slide>
</ion-slides>
Could you help me please ?
Thanks by advance,

Answer 1

From Ionic documentation available range component
So you can use ionFocus and ionBlur of this component and use lockSwipes(true) method between these two events.
public swipe: IonSlides;
#ViewChild(IonRange) range: IonRange;
this.range.ionFocus.subscribe(() => {
this.swipe.lockSwipes(true);
});
this.range.ionBlur.subscribe(() => {
this.swipe.lockSwipes(false);
});