如何解决Javascript 中的时间滑块

我这里有一个滑块。其功能代码如下：

const [durationPercentage,setDurationPercentage] = useState(0);
const [maxDuration,setMaxDuration] = useState("06:00");

  useEffect(() => {
    const durationMax = maxDuration.replace(":","");

    const duration = (Number(durationMax) * durationPercentage) / 100;

    var a = String(duration);
    var b = ":";
    var position = String(duration).length - 2;
    var output = [a.slice(0,position),b,a.slice(position)].join("");
    console.log(output);
  },[durationPercentage]);


   /*========== Slider ===============*/

    <Slider
      onChange={(event,newDurationPercentage) =>
       setDurationPercentage(newDurationPercentage)
      }
    />

当我滑动滑块时，我得到了结果：

但是，如您所见，: 后面有大于 60 的数字。当大于或等于 60 的数字到来时，我希望分钟增加 1。
即：当滑块滑动时，我希望结果实际上是一个有效时间。比如：01:04、07:55 和非：04:79、01:88。格式为 mm:ss 格式。
任何帮助都非常感谢！

解决方法

我认为，如果您改为将 durationPercentage 和 maxDuration 存储为数值，会使数学更容易，并且将值从一个单位转换为其他单位就变得微不足道了。

解决方案

以秒为单位存储所有数值。

将秒转换为整分钟：秒/60 和地板
计算剩余秒数：second mod 60
将结果转换为用“0”填充到长度为 2 的字符串以填充到两个“数字”。

代码

const [durationPercentage,setDurationPercentage] = useState(0);
const [maxDuration,setMaxDuration] = useState(360);

useEffect(() => {
  const duration = Math.floor((maxDuration * durationPercentage) / 100);

  const minutes = Math.floor(duration / 60);
  const seconds = duration % 60;

  const output = `${String(minutes).padStart(2,0)}:${String(
    seconds
  ).padStart(2,0)}`;

  console.log(output);
},[durationPercentage,maxDuration]);

演示

这是固定代码。

const [durationPercentage,setMaxDuration] = useState("06:00");

useEffect(() => {
    const maxMinuteSecond = maxDuration.split(":");
    const durationMax = Number(maxMinuteSecond[0]) * 60 + Number(maxMinuteSecond[1]);

    const duration = (Number(durationMax) * durationPercentage) / 100;

    var second = duration % 60;
    var minute = (duration - second) / 60;// Math.floor(duration / 60);
    
    var output = (minute<10?"0":"") + minute.toString() + ":" + (second<10?"0":"") + second.toString();;
    console.log(output);
},[durationPercentage]);