Displaying time in <ion-range>

Issue

I'm new to Ionic, and I'm attempting to display the time as 24 hours from 00:00 to 23:00, with the user able to select a time period.

 <ion-range min="00:00" max="23:00"  step="00:01" dualKnobs="true"  pin="true" [(ngModel)] ="knobValues" >
  <ion-label slot="start">0:00</ion-label>
  <ion-label slot="end">23:00</ion-label>
</ion-range>

Type script code:

public knobValues: Object = {
    upper:5,
    lower:10
  }

However, the hours are displayed as digits rather than the time, for example, 10:23.

Solution

The Ionic range component only works with numbers. "23:00" is not a number.

You can use hours with min 0 and max 23. You can set step to a factional value, for example 0.25 for 15 minutes.

The labels are just text, so you can leave them as they are.

To display the current value as a time value in the "pin", you need to set pinFormatter.

You can also use minutes for the values if that is more convenient.

<ion-range min="0" max="1380" step="1" dualKnobs="true" pin="true" [(ngModel)] ="knobValues" >
  <ion-label slot="start">0:00</ion-label>
  <ion-label slot="end">23:00</ion-label>
</ion-range>

Answered By - rveerd