Selecting time of day range (HH:MM, HH:MM)? (getting 21:39:60 instead of 21:40:00)

Panel
1

I’m trying to make a widget for selecting time of day range (HH:MM, HH:MM). The underlying data is seconds ranging from 0 to 86400 (=24hours), but I could change that to anything else, too.

My attempt in a MWE:

import panel as pn
from bokeh.models import NumeralTickFormatter

MINUTES_IN_DAY = 24 * 60
SECONDS_IN_DAY = MINUTES_IN_DAY * 60

pn.extension(sizing_mode="stretch_width", template="fast")


slider = pn.widgets.RangeSlider(
    name="Time of day (UTC)",
    start=0,
    end=SECONDS_IN_DAY,
    value=(0, SECONDS_IN_DAY),
    step=600,
    format=NumeralTickFormatter(format="00:00:00"),
)

slider.servable()

This works otherwise but shows frequently times ending with 60 seconds (which should be the next minute). For example:

image
image1115×166 7.22 KB

Question(s)

What I am getting 21:39:60 instead of 21:40:00 and what would be the recommended way to solve this? I see RangeSlider for a floating point range, but the IntRangeSlider does not have the format parameter. Is there some better Slider component for this? Or should I use some other formatter? I know there is option for CustomJSTickFormatter but isn’t that an overkill for presumably a common problem…?

Edit: Tried format with IntRangeSlider (it was there, just not listed in the docs). It has the same problem.

2

As a workaround, using a CustomJSTickFormatter (and minutes instead of seconds):

minute_hour_formatter = CustomJSTickFormatter(
    code="""
const rounded_minutes = Math.round(tick);
const hours = Math.floor(rounded_minutes/60);
const minutes = rounded_minutes % 60;
const hhmm =  (hours).toFixed().padStart(2, '0') + ':' + (minutes).toFixed(0).padStart(2, '0');
return hhmm;
"""
)