Learn how to create an interactive range slider for a dashboard using Dash and Pandas by determining minimum and maximum values from a dataset. This article guides you through setting up the slider component and defining its range, initial value, and step behavior based on engine size data.
Key Insights
- Use Pandas’
.min()and.max()functions to dynamically determine the minimum and maximum engine sizes from a dataset, which set the bounds for the range slider. - Define the Dash component
dcc.RangeSliderwith parameters such asid,min,max,step, andvalueto create an interactive interface element that adjusts in increments of one liter. - The slider’s initial value spans from the minimum to the maximum engine size, and although it updates visually, interactivity logic for filtering data is not yet implemented in this stage of the project.
Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.
Let's make a slider for our app, for our dashboard. We're going to do a little bit of Pandas's work just to find the minimum engine size and the maximum engine size. I'm going to call those min engine size and max engine size and min engine size will simply be an integer of cars at engine size dot min.
Every column in Pandas's has a minimum value and a maximum value and dot min and dot max will find those values for you. So then we'll do the same thing for max engine size dot max. There we go.
We're going to use those values a couple of times and what we're going to do is have a slider that goes from the minimum value to the maximum value. Okay. So to make a slider, we're going to use those minimum and maximum values and we're going to say, okay, here's the value it starts at.
Here's the value it ends at. Go between them. Okay.
So maybe below our dropdown, let's do it below our dropdown. We'll make DCC dot range slider. Range slider.
Like that. And don't forget to add a comma after it. We are still in a list of children for the div.
This list right here. Okay. Now we're going to give it, we're going to call range slider and we're going to give it some arguments.
One will be an ID. Might as well do that now. What name to give it when we're trying to create this interactivity.
And the name I'm going to give it is engine size slider. Okay. Then we're going to give it what value to start at.
This is sort of like range in Python. Just your range, your minimum value, your maximum value, and your step through it. So for a minimum, we'll do our min engine size.
And for max, we'll do our max engine size. And finally, our value is the initial value of this. Just like we had to give an initial value of all manufacturers, the initial value is, it goes from the start to the end.
Value equals a list of two values, which are the min engine size and the max engine size. Okay. Let's save this.
We don't have any real interactivity programmed in yet, but let's save that and see if it works. All right. It goes from one to eight.
And you can interact with it this way. Of course, it's not filtering the below yet, because we haven't added that logic. Visually, there's some problems here.
One is that these marks are kind of at random here. 1.53,4.56, eight. Eight is the maximum, one is the minimum, so that's correct.
That's how many liters the engine is. But we want to add a step value. And one is a good value here.
And now it doesn't go in between as it did before, and it's going up one by one. Or going down one by one. All right.
It looks good so far. In our next video, we'll walk through what we can add to the logic to make this happen.