Ionic Framework 4 – Set default width/distance between dual knobs of range slider

I’m Ionic developer and feeling there are less resources available for this framework especially its newly launched version 4. I had to set default range for dual knobs of range slider and had to spent a lot time and then finally after some hints I was able to figure it out.

In your component html file, for example range-slider.html simply put the code ionic range slider code as provided by its documentation:

<ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true" [(ngModel)]="rangeSlider"></ion-range>

Then its its relevant .ts file (for example range-slider-page.ts) inside constructor put this code:

salaryRange: any;

constructor() {
   rangeSlider {
      lower: 40,  // from
      upper: 60   // to
   };
}

I hope you’ll get the expected results.

Thanks.