changing track color between 2 Slider handles

Question

I am using Script.aculo.us Slider.js to display dual sliders. It working perfectly. what I want to do is to change the color to track only in between these two slider.

For example if 1st Slider is on value 5 and 2nd is on value 8. I want that the track fron 5-8 is green and the rest is gray. to simulate king of selected range.

Is it possible?

Answer 1

I have figured it out, it is possible by using 2 options properties startSpan and endSpan.

Maybe it is useful for someone else I am pasting here sample HTML snippt and javascript

<div id="slider-week-track">
  <div id="span1" style="float:left;background-color: #B7C0CD; height: 11px;"></div>
  <div class="slider-week slider-min" id="slider-week-min-handle"></div>
  <div class="slider-week slider-max" id="slider-week-max-handle"></div>
  <div id="span2" style="float:right;background-color: #B7C0CD; height: 11px;"></div>
</div>

and javascript

new Control.Slider(this.options.handles, 'slider-week-track', {
                        range:$R(0,10, false),
                        sliderValue: [1,5],
                        values: [0,1,2,3,4,5,6,7,8,9,10],
                        restricted: true,
                        startSpan: 'span1',
                        endSpan: 'span2',
                        onChange:   function(val) { 
                            //your code here
                        }
        });