DateRangeSlider

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

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

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

• step (int): Step in days

• 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 (str): The datetime format

• label (str): The title of the widget

• orientation (str): Whether the slider should be displayed in a ‘horizontal’ or ‘vertical’ orientation.

• tooltips (boolean): Whether to display tooltips on the slider handle

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.

date_range_slider = pmui.DateRangeSlider(
    label='Date 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=2
)

date_range_slider

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

date_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.DateRangeSlider(
    start=dt.datetime(2017, 1, 1), end=dt.datetime(2019, 1, 1),
    value=(dt.datetime(2017, 1, 1), dt.datetime(2018, 1, 10)),
)

Show Value

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

pmui.DateRangeSlider(
    start=dt.datetime(2017, 1, 1), end=dt.datetime(2019, 1, 1),
    value=(dt.datetime(2017, 1, 1), dt.datetime(2018, 1, 10)),
    show_value=False, label='DateRangeSlider'
)

Disabled

The widget can be disabled with disabled=True.

pmui.DateRangeSlider(
    label='Date Range Slider (disabled)', disabled=True,
    start=dt.datetime(2017, 1, 1), end=dt.datetime(2019, 1, 1),
    value=(dt.datetime(2017, 1, 1), dt.datetime(2018, 1, 10))
)

Color

You can specify a color.

pmui.FlexBox(*(
    pmui.DateRangeSlider(
        label=f'Date Range Slider ({color})', color=color,
        start=dt.datetime(2017, 1, 1), end=dt.datetime(2019, 1, 1),
        value=(dt.datetime(2017, 1, 1), dt.datetime(2018, 1, 10)),
    )
    for color in pmui.DateRangeSlider.param.color.objects
))

Sizes

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

pmui.Row(
    pmui.DateRangeSlider(
        label='Date Range Slider', size="small",
        start=dt.datetime(2017, 1, 1), end=dt.datetime(2019, 1, 1),
        value=(dt.datetime(2017, 1, 1), dt.datetime(2018, 1, 10))
    ),
    pmui.DateRangeSlider(
        label='Date Range Slider', size="medium",
        start=dt.datetime(2017, 1, 1), end=dt.datetime(2019, 1, 1),
        value=(dt.datetime(2017, 1, 1), dt.datetime(2018, 1, 10))
    ),
)

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(2017, 1, 1),
    "label": "01/01",
  },
  {
    "value": dt.datetime(2017, 3, 1),
    "label": "03/01",
  },
  {
    "value": dt.datetime(2017, 5, 1),
    "label": "05/01",
  },
  {
    "value": dt.datetime(2017, 12, 1),
    "label": "12/01",
  }  
]

pmui.DateRangeSlider(
    marks=marks, start=dt.datetime(2017, 1, 1), end=dt.datetime(2018, 1, 1),
    value=(dt.datetime(2017, 1, 1), dt.datetime(2018, 1, 10))
)

Tooltip always visible

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

pmui.DateRangeSlider(
    label='Date', tooltips=True,
    start=dt.datetime(2017, 1, 1), end=dt.datetime(2019, 1, 1),
    value=(dt.datetime(2017, 1, 1), dt.datetime(2018, 1, 10)),
)

Tracks

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

pmui.Row(
    pmui.DateRangeSlider(
        label='Date Range Slider', track=False,
        start=dt.datetime(2017, 1, 1), end=dt.datetime(2019, 1, 1),
        value=(dt.datetime(2017, 1, 1), dt.datetime(2018, 1, 10)),
    ),
    pmui.DateRangeSlider(
        label='Date Range Slider', track="inverted",
        start=dt.datetime(2017, 1, 1), end=dt.datetime(2019, 1, 1),
        value=(dt.datetime(2017, 1, 1), dt.datetime(2018, 1, 10)),
    )
)

Vertical Sliders

The orientation of a slider may be “vertical”:

pmui.DateRangeSlider(
    label='Date Range Slider', orientation="vertical",
    start=dt.datetime(2017, 1, 1), end=dt.datetime(2019, 1, 1),
    value=(dt.datetime(2017, 1, 1), dt.datetime(2018, 1, 10))
)

Controls

The DateRangeSlider 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(date_range_slider.api(jslink=True), date_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 DateRangeSlider Reference and API documentation for inspiration.

---

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