1. Slider widgets
Now let's talk about a couple of different slider widgets.
2. RangeSlider widget
We will first discuss the RangeSlider widget, which enables stakeholders to change a numeric value linked to an axis, resulting in an updated view.
To use it, we import RangeSlider from bokeh-dot-models.
We call RangeSlider and provide a title, a start value, and an end value. We pass a tuple to the value argument, setting the default values for the RangeSlider. Lastly, we use step to assign the size of the change occurring when the widget is used.
We call x_slider-dot-js_link, passing a string containing the word value as the first argument. This tells the widget that an interaction, such as a mouse click, should link the value selected to the figure's x_range. We specify the x_range's start and assign attribute selector equal to zero. This attaches the value on the left side of the widget to the start of the plot's x_range.
We call js_link again, now selecting the x_range's end attribute and linking it to the right side value of the widget by assigning attribute selector equal to one.
Lastly, we call layout inside of show, passing a list containing our figure and slider objects.
3. RangeSlider
See how we can edit the start and end values of the x-axis and even move across a zoomed-in view of the plot?
4. Multiple widgets
We can go a step further by using a RangeSlider on both the x and y-axes. We create an additional RangeSlider, called y_slider, this time linking it to the figure's y_range.
5. RangeSlider for both axes
How cool is that! The RangeSlider is a great way to draw more insights from our visualizations.
6. DateRangeSlider widget
What if we are producing a line plot to visualize the changes in values over time? A RangeSlider won’t work, as our x-axis is not numeric.
In this situation, we can use the DateRangeSlider widget, also from bokeh-dot-models.
We call DateRangeSlider, passing minimum and maximum values from our date column to the start and end arguments. The value argument takes two dates written as strings in the format of year, month, then day. The step argument assigns how many days we wish to move the x-axis based on an interaction with the widget.
We call slider-dot-js_link, linking the widget's value to the figure's x_range. We specify the x_range's start and assign attribute selector equal to zero. This attaches the left side of the widget's value to the start of the plot's x_range. Again, we repeat this to link the right-hand side of the widget to the x_range's end.
7. DateRangeSlider
See how useful the DateRangeSlider can be for zooming in on specific time periods. Without this widget, we would need to produce multiple plots with different x-axis ranges, or else we may not identify some potentially useful information.
8. Let's practice!
Now let's add some slider widgets to our visualizations!