CODEWITHSUNDEEP
ionic-frameworksliderionic5ion-range-slider
Muhammad Hewedy
Muhammad Hewedy

Reputation: 30058

Cannot set the default min and max values for ionic ion-range

I am trying to use the ion-range from ionic v5 (latest) here: https://ionicframework.com/docs/api/range

Their demo shows the ability to set a default min and max values when I have 2 knobs slider.

The documentation says to use number | { lower: number; upper: number; } to set the value, however, the range part doesn't work.

Here's the code I use:

<ion-range dualKnobs="true" min="1" max="7" step="1" snaps="true" pin="true" value="{ lower: 2; upper: 3; }">
  <ion-label slot="start">1</ion-label>
  <ion-label slot="end">7</ion-label>
</ion-range>

And here's the output (I'm using an rtl settings)

enter image description here

Upvotes: 0

Views: 810

Answers (1)

Muhammad Hewedy
Muhammad Hewedy

Reputation: 30058

I figured it out: I need to pass a JSON object to value property like this:

[value]="{ lower: '2', upper: '3'}

Upvotes: 1

Related Questions