DatetimeRangeSlider#

Download this notebook from GitHub (right-click to download).

import datetime as dt

import panel as pn
import panel_material_ui as pmui

pn.extension()

The DateRangeSlider widget allows selecting a date range using a slider with two handles.


Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity. Alternatively, learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.




Parameters:#


For details on other options for customizing the component see the customization guides.




Core#


    

  • disabled (boolean): Whether the widget is editable
    • 

  • end (datetime): The range’s upper bound
    • 

  • start (datetime): The range’s lower bound
    • 

  • step (int): Step in milliseconds, default is 1 minute (60.000 ms)
    • 

  • value (tuple): Tuple of upper and lower bounds of the selected range expressed as datetime types
    • 

  • value_throttled (tuple): Tuple of upper and lower bounds of the selected range expressed as datetime types throttled until mouseup
    • 







Display#


    

  • bar_color (color): Color of the slider bar as a hexadecimal RGB value.
    • 

  • direction (str): Whether the slider should go from left to right (‘ltr’) or right to left (‘rtl’).
    • 

  • format (string): The datetime’s format
    • 

  • label (str): The title of the widget.
    • 

  • marks (boolean | list[dict]):  Marks indicate predetermined values to which the user can move the slider. If True the options are shown as marks. If a list, it should contain dicts with ‘value’ and an optional ‘label’ keys.
    • 

  • orientation (Literal["horizonta", "vertical"]): Whether the slider should be displayed in a ‘horizontal’ or ‘vertical’ orientation.
    • 

  • show_value (boolean): Whether to show the widget value as a label or not.
    • 

  • tooltips (boolean | Literal["auto"]): Whether to display tooltips on the slider handle.
    • 

  • track (Literal["normal", "inverted"]): Whether to display ‘normal’ or ‘inverted’.
    • 







Styling#


    

  • sx (dict): Component level styling API.
    • 

  • theme_config (dict): Theming API.
    • 







Aliases#


For compatibility with Panel certain parameters are allowed as aliases:


    

  • name: Alias for label
    • 





The slider start and end can be adjusted by dragging the handles and whole range can be shifted by dragging the selected range.


datetime_range_slider = pmui.DatetimeRangeSlider(
    label='Datetime Range Slider',
    start=dt.datetime(2017, 1, 1), end=dt.datetime(2019, 1, 1),
    value=(dt.datetime(2017, 1, 1), dt.datetime(2018, 1, 10)),
    step=10000
)

datetime_range_slider







            
            
DatetimeRangeSlider.value returns a tuple of datetime values that can be read out and set like other widgets:


datetime_range_slider.value





(datetime.datetime(2017, 1, 1, 0, 0), datetime.datetime(2018, 1, 10, 0, 0))








Label#


You may remove the label/ name by not setting it.


pmui.DatetimeRangeSlider(start=dt.datetime(2019, 1, 1), end=dt.datetime(2019, 6, 1), value=(dt.datetime(2019, 2, 8), dt.datetime(2019, 4, 14)))







            
            




Show Value#


You may remove the value label by setting show_value=False.


pmui.DatetimeRangeSlider(
    start=dt.datetime(2019, 1, 1), end=dt.datetime(2019, 6, 1),
    value=(dt.datetime(2019, 2, 8), dt.datetime(2019, 4, 14)),
    show_value=False, label='DatetimeRangeSlider'
)







            
            




Disabled#


The widget can be disabled with disabled=True.


pmui.DatetimeRangeSlider(
    label='Datetime Slider (disabled)', disabled=True,
    start=dt.datetime(2019, 1, 1), end=dt.datetime(2019, 6, 1),
    value=(dt.datetime(2019, 2, 8), dt.datetime(2019, 4, 14))
)







            
            




Color#


You can specify a color.


pmui.FlexBox(*(
    pmui.DatetimeRangeSlider(
        label=f'Datetime Slider ({color})', color=color,
        start=dt.datetime(2019, 1, 1), end=dt.datetime(2019, 6, 1),
        value=(dt.datetime(2019, 2, 8), dt.datetime(2019, 4, 14))
    )
    for color in pmui.DatetimeRangeSlider.param.color.objects
))







            
            




Sizes#


For smaller slider, use the parameter size="small".


pmui.Row(
    pmui.DatetimeRangeSlider(
        label='Datetime Slider', size="small",
        start=dt.datetime(2019, 1, 1), end=dt.datetime(2019, 6, 1),
        value=(dt.datetime(2019, 2, 8), dt.datetime(2019, 4, 14))
    ),
    pmui.DatetimeRangeSlider(
        label='Datetime Slider', size="medium",
        start=dt.datetime(2019, 1, 1), end=dt.datetime(2019, 6, 1),
        value=(dt.datetime(2019, 2, 8), dt.datetime(2019, 4, 14))
    ),
)







            
            




Custom Marks#


You can have custom marks by providing a rich list to the marks parameter. Note that unlike continuous sliders the value of the marks should be the integer index of the option.


marks = [
  {
    "value": dt.datetime(2019, 1, 1),
    "label": "01/01",
  },
  {
    "value": dt.datetime(2019, 3, 1),
    "label": "03/01",
  },
  {
    "value": dt.datetime(2019, 5, 1),
    "label": "05/01",
  },
  {
    "value": dt.datetime(2019, 6, 1),
    "label": "06/01",
  }  
]

pmui.DatetimeRangeSlider(
    marks=marks, start=dt.datetime(2019, 1, 1), end=dt.datetime(2019, 6, 1),
    value=(dt.datetime(2019, 2, 8), dt.datetime(2019, 4, 14))
)







            
            




Tooltip always visible#


You can force the thumb label to be always visible with tooltips=True.


pmui.DatetimeRangeSlider(
    label='Datetime Range', tooltips=True, start=dt.datetime(2019, 1, 1), end=dt.datetime(2019, 6, 1), value=(dt.datetime(2019, 2, 8), dt.datetime(2019, 4, 14))
)







            
            




Tracks#


The track can be inverted or removed with track="inverted" and track=False respectively:


pmui.Row(
    pmui.DatetimeRangeSlider(
        label='Datetime Range Slider', track=False,
        start=dt.datetime(2019, 1, 1), end=dt.datetime(2019, 6, 1),
        value=(dt.datetime(2019, 2, 8), dt.datetime(2019, 4, 14))
    ),
    pmui.DatetimeRangeSlider(
        label='Datetime Range Slider', track="inverted",
        start=dt.datetime(2019, 1, 1), end=dt.datetime(2019, 6, 1),
        value=(dt.datetime(2019, 2, 8), dt.datetime(2019, 4, 14))
    )
)







            
            




Vertical Sliders#


The orientation of a slider may be “vertical”:


pmui.DatetimeRangeSlider(
    label='Datetime Range Slider', orientation="vertical",
    start=dt.datetime(2019, 1, 1), end=dt.datetime(2019, 6, 1),
    value=(dt.datetime(2019, 2, 8), dt.datetime(2019, 4, 14))
)







            
            




Controls#


The DatetimeRangeSlider widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:


pmui.Row(datetime_range_slider.api(jslink=True), datetime_range_slider)







            
            




References#


Discover more on using widgets to add interactivity to your applications in the how-to guides on interactivity.


Learn how to set up callbacks and (JS-)links between parameters or how to use them as part of declarative UIs with Param.


See also the Material UI DatetimeRangeSlider Reference and API documentation for inspiration.




Download this notebook from GitHub (right-click to download).