A simple way to custom a Slider as a DateSlider

Showcase
,
1

The DateSlider now is not convenient enough for its step based on days. So a simple way to get a flexible customed DateSlider is showed below:

from datetime import datetime, timedelta, timezone

import numpy as np
import pandas as pd
from pandas.tseries.offsets import Minute

from bokeh.models import (ColumnDataSource, CustomJS, Label, DateSlider, LabelSet, 
Button, CategoricalColorMapper, HoverTool, Label, SingleIntervalTicker, Slider)
from bokeh.plotting import figure, show, save, output_file
from bokeh.layouts import column, row, layout


step = timedelta(minutes=6)
step_times = pd.date_range("2022-1-1", freq=step, periods=10,
    tz="utc")

t = [str(t) for t in step_times]
slider = Slider(start=0, end=len(step_times)-1, step=1, value=0,
    title=f"Time: {t[0]}")
slider.js_on_change("value", CustomJS(args=dict(sl=slider, t=t), code="""
    console.log('slider: value=' + this.value, this.toString())
    sl.title = "Time: " + t[this.value];
"""))

lay = layout([slider])
output_file("test.html")
save(lay)

Another way I found it is using date format like format="00:00:00" but I think it is also limited to express beyond hour.

2

HI @swpper1 thanks for sharing the code. It seems to me there might be a relatively simple-to-fix omission here. There is a DatatimeRangeSlider for a double-ended datetime range slider. But for some historical reason there is not a single-ended DatetimeSlider. Please feel free to open a GitHub Issue about adding one!

1 Like
3

HI @Bryan, I will go to read the source code of DatatimeRangeSlider and try to open a issue. :slight_smile:

1 Like