GEOG 863:
Web Application Development for Geospatial Professionals

7.2.5 Range Slider


7.2.5 Range Slider

A slider control can be an effective means of enabling the user to specify a numeric parameter within a range of possible values. This sample demonstrates how a range slider can be implemented in an Esri JS app.

Initial setup

The two sliders in the sample are defined in the HTML on lines 266-270. Note that they are created as input elements of type="range". The min and max attributes should be self-explanatory. The step attribute specifies how much the slider value can be incremented when it is dragged, relative to its min value. Here, a step of 10 and a min of 0 means that the slider can take on values of 0, 10, 20, etc. If the min were changed to 5, possible values would be 5, 15, 25, etc. The value attribute specifies the slider's initial value.

Another important point to note in the HTML is the insertion of a span element (with an id so that it can be referenced in the JavaScript code). The text associated with this span element is used to convey the slider's current value. The text is set to 10000 and 2.0 to match how the sliders' value attributes were set. We’ll see in a moment that a listener is set up to keep the slider's value and the span element text in sync.

Getting the slider value

Near the top of the JavaScript code, references are obtained to the four UI elements (the dropdown list, two sliders and the button) using the getElementById() method we've seen in the previous samples. A listener is set up for the button's click event on lines 221-224, which specifies that a click on the button should trigger execution of a function called queryEarthquakes(). That function (which begins on line 226) creates a Query object that looks for features in an earthquake layer that have a magnitude value greater than or equal to what the user specified through the magnitude slider. We talked about queries in the last lesson, so that’s not my focus here. What I want you to focus on is that the slider's value is obtained simply by reading its value property.

Synching the slider value and its label

Lines 198-205 contain code for the setup of two listeners, one for each of the two sliders. Inside each of the anonymous functions, the slider's value is obtained, stored in a variable, then inserted into the appropriate span element. Earlier, we saw the use of the JavaScript innerHTML property to change the text associated with an element. In this sample, innerText is used instead. Either one will work here. If you wanted to include HTML markup instead of just plain text, then you’d need to use innerHTML.

Finally, note that the event specified here is input rather than change, which we’ve seen in earlier samples. The difference is that the input event is triggered immediately after the element's value is changed, whereas the change event is not triggered until the element loses focus. The desired behavior is for the label to be updated as the user drags the slider back and forth. Setting up the listener on the input event accomplishes this, whereas setting it on the change event would cause the label to update only after the user had finished dragging and let go of the mouse button.