Interactive components

1. Interactive components

Let's further enhance the interactivity of our Dash apps with more interactive components.

2. Enhancing Interactivity

Dash has many interactive components in the dcc module. Here are some useful ones: dcc-dot-Checklist creates checkboxes. dcc-dot-RadioItems creates a radio button selection. dcc-dot-Slider and dcc-dot-RangeSlider create slider selections. We'll look at these closely shortly. There are also selectors for dates, including dcc-dot-datePickerSingle and dcc-dot-DatePickerRange. They behave similarly to sliders.

3. Sliders

A slider lets users drag a dot along a line to select a value. A range slider is similar; however, there are two dots, so we are able to select two values that form a range. Remember, these selectors are primarily used to link to a callback that will update a plot or other Dash component.

4. Sliders in Dash

Let's create and customize a Dash slider using dcc.Slider. The min and max arguments set the slider's bounds. Here, the slider will start at 10 and finish at 50. The value sets what will be selected upon loading the app. This slider will start with 45 selected. The step sets how much each notch along the slider will increment the value. This slider will increase by five each notch. We can also set vertical to False for a horizontal layout.

5. Date pickers in Dash

It is common to have dates in our data. Here, DatePickerSingle comes in handy as a selector for a single date. Here is what a date picker looks like. In Dash, this is created using dcc-dot-DatePickerSingle. Some key arguments are seen here. The date argument sets what date is first selected. Here it is, the first of July in 2025. The initial_visible_month is the month shown first in the popup. This extracts the date from a Python date object so we can use datetime-dot-now, which will extract the current month. Optionally, we can limit choices using the min_date_allowed and max_date_allowed arguments. This can ensure that users can only select what is available in the data.

6. Date Range Picker

A date picker range is similar to a date picker single. Here is what it looks like visually. In Dash, the code shares many arguments, as we can see. However, we now have a start_date and end_date argument to set what will be initially visible in both date pickers.

7. Updating plots

Interactive components are most useful when linked to a callback. Let's walk through an example. The app-dot-layout code has been commented out to focus on the callback. Let's assume we have a DatePickerSingle and a graph to update. We define a callback with an input and output. This time, we use the date property from the date picker, not a value like in the dropdown example. The callback should trigger a function with input from the date picker. Remember to copy the DataFrame to avoid overwriting it during each callback. We check if a date is provided, then filter the DataFrame using that date. Finally, a figure is created on the subset data and returned, triggering the figure update.

8. Let's practice!

Let's practice adding further interactivity to our Dash apps.

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.