jQuery slider - set background color to show desired range

Question

Howdy, I'm setting up a Filament Group jQuery UI slider and using it in a gradebook.

We need to allow teachers to set a desired background range (to show the desirable values vs. the actual value for a given grade). I'm hoping to set a shaded area (as shown in this picture) that would indicate to people viewing the slider which values are desirable. If the handle is within the desired ranges, then the value is satisfactory. If the handle is out of the background shaded range, then some changes may need to happen.

Any suggestions on how to accomplish this? Based on what I've experimented with using Firebug, it looks like a <div class="ui-slider"> is setup, but the values inside of it don't seem to allow setting background-colors (only the div allows for that).

Thanks for your help.

Answer 1

As I understand, you're using the Filament Group plugin to set where the shaded area is to be displayed, and thus it is not part of the actual problem of displaying the area. My solution therefore only focus on the pure jQuery slider.

As you said, I'd use a div (here called slider-shaded) to make the slider and then put another div inside it to mark the area. This is close to how jQuery does it (placing a div inside the slider div). I called this area range in my following code. In this example, the shaded area is placed from 65% to 85%

HTML

<div id="slider-shaded"><div id="range"></div></div>

CSS

#range {
    position: absolute;
    height:100%;
    width:20%;
    top: 0;
    left: 65%;
    background-color:gray;
}

Javascript

$(document).ready(function() {
    $("#slider-shaded").slider();
});

I made an overkill demo while watching Mad Men. Here.