在 Ion Range Ionic 5 中更改引脚格式

Question

我正在尝试创建一个时间滑块，范围从 6:00 AM 到 18:00 PM，每 30 分钟有一个刻度线（6:00、6:30、7:00，等等）。问题是 Ion Range 上的 pin 格式仅显示整数，我还没有真正弄清楚如何将其转换为时间范围。

到目前为止，这是我的代码，Pin 格式化程序：

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

离子范围：

  <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>
                          

提前致谢！

Answer 1

如我的评论所述，您的自定义格式化程序不正确。

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`;
    }
  }