Ion-range with selected value in ionic 4

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

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>

See here:

All you need is the template:

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

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