Ionic v4: Time Range selection using angular

Can anyone help me how to achieve this is ionic 3 or 4 please. start and end time should be selectable using range icon…

yes you can do it by ion-range

prefer above link and use ion-range with dual knobs.


Thanks for the help abhayjani. i will try to implement using ion-range.


do you how to add time interval for the ion-range and get the time different after selecting the range?.
Eg: if is select range from 10:00 to 10:30 then difference time i should get as 30min.

the ion-range show like below screenshot, but i wanted to add time intervals. so can you tell how to achieve this please.

<ion-range min=“1000” max=“2000” step=“100” snaps=“true” color=“secondary”></ion-range>



<ion-range dualKnobs=“true” min=“21” max=“72” step=“3” value=“60” snaps=“true”></ion-range>


yes, you can you need to pass max and min time into min and max than you need to define step of time slot and you will get starting time and ending time.