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.
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.
Getting the slider value
Synching the slider value and its label
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.