☰Read-only archive⌕
Looking for help with Bokeh?

This is a read-only archive. Ask questions and join the conversation on GitHub.

Visit Community Support on GitHub →
Archived discussions · Captured October 28, 2026

A simple way to custom a Slider as a DateSlider

Showcasecustomjsbokeh
swpper1
swpper1

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.

⌁   Link to post

End of archived discussion · Replies are disabled