CODEWITHSUNDEEP
javascriptangularangular-material
infodev
infodev

Reputation: 5245

Angular Material Slider 24h formatting with minutes steps

I would slide with minutes steps

I'm using Angular Material Slider

Actually I can slide every minutes.

formatLabel(value: number | null) {
  if (!value) {
    return '00:00';
  }
  if(value===0) {
    return '00:00'
  }
  if(value===24) {
    return '23:59'
  }

  let decimalPart = +value.toString().replace(/^[^\.]+/,'0');
  let mm = decimalPart * 60;
  mm=Math.round(mm)
  var mmPart = mm.toString().length == 1 ?  "0"+mm.toString() : mm.toString();
  if(mmPart =='60') {
    mmPart='00'
  }

  if (value >= 0) {
    let valueStr = value.toFixed(2);
    let strArr = valueStr.split(".");
    if(strArr[0].length == 1) {
      strArr[0] = "0" + strArr[0];
    }
    var hhPart = strArr[0];
    //console.log(strArr);
  }

  return hhPart + ":" + mmPart;
}

My actual problem is when I arrive to 24 on screen I get 24:00.

I would that it stops on 23:59 so I added a condition : 

if(value===24) {
  return '23:59'
}

But now I get two values of 23:59 on 24:00 -1 minutes and on 24:00 I would find a solution to stop slider on 23:59

Here's a Stackblitz demo

Upvotes: 1

Views: 441

Answers (2)

Akshay Rana
Akshay Rana

Reputation: 1485

Change your max value to :

24 - 1/60  //that is 1 minute less of 24 hours
i.e.
<mat-slider max=23.9834>

Upvotes: 2

Dino
Dino

Reputation: 8292

Modifying the max in your template will do the work

 <mat-slider ... max="23.99">

That way you will never reach 24 therefore you can remove the check you were previously doing.

Upvotes: 1

Related Questions