Ion-range with selected value in ionic 4

Ionic Framework
1

when i load the page ion-range need to have a selected value like this
img_20191120
can anyone help me??

2

You can use a FormControl

// in your component
myRange: new FormControl({lower: 10, upper: 25})

// in your html
<ion-range formControlName="myRange" color="primary" dualKnobs="true" min="1" max="40" step="1"></ion-range>
2 Likes
3

See here:

All you need is the template:

<ion-item>
    <ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true" [value]="{ lower: 30, upper: 45 }"></ion-range>
  </ion-item>

And then you can add property ‘value’ bound to both knobs according to docs.
You can surely bind this to a property inside your component.

1 Like