Getting range values

The slider widget can be used to control a range value. So instead of moving a fixed point, that is the handle, back and forth over the slider axis, the user will move two handles back and forth. The space in between these two points represents the range value. But how do we go about computing that number? The slider widget gives us the raw data, the upper and lower bounds on the user selection. We can use these values inside our event handlers to compute the range value.

Getting ready...

We'll use just a basic slider for this demonstration, but we'll need some supporting CSS and HTML surrounding the slider so that we can display the range values as they're changed. Here is the CSS:

.slider-container { 
    width: 180px;
    margin: 20px;
}

.slider-container .slider-label {
    margin-bottom: 10px;
    font-size: 1.2em;
}

And here is the HTML:

<div class="slider-container">
    <div class="slider-label">
        <span>Range Value: </span>
       ...