Changing pin format to date in Ion Range Ionic 5

Issue

I'm trying to create a time slider that ranges from 6:00 AM to 18:00 PM with tickmarks every 30 minutes (6:00, 6:30, 7:00, etc). Problem is pin format on Ion Range only shows integers and I haven't really been able to figure how can I transform that into a time range.

Here's my code so far, Pin formatter:

const customFormatter = (value: Date) => `${value}%`;

IonRange:

  <div className="container">
      <IonRange min={6} max={18} dual-knobs={true} step={0.5} ticks={true} pin-formatter={customFormatter} pin snaps dualKnobs={true} color="primary">
      </IonRange>
                              
      <div className="tickmarks">
          <p>6:00</p>
          <p>6:30</p>
          {/*... hours as labels here to appear underneath the slider*/}
      </div>
  </div>
                          

Thanks in advance!

Solution

As mentioned in my comment, your custom formatter is not correct.

Here is a stackblitz which shows the basic approach you need.

customFormatter(value: number): string {

    const myValue = value.toString();

    if (myValue.indexOf('.5') === -1) {
        return `${myValue}:00`;
    } else {
      return `${myValue.split('.')[0]}:30`;
    }
  }

Answered By - E. Maggini