scriptaculous - 2つのスライダーハンドル間でトラックの色を変更する

Question

Script.aculo.us Slider.jsを使用して、デュアルスライダーを表示しています。それは完璧に機能しています。私がやりたいのは、これら2つのスライダーの間だけを追跡するように色を変更することです。

たとえば、1番目のスライダーが値5にあり、2番目が値8にある場合、5〜8のトラックフロンを緑色にし、残りを灰色にします。選択した範囲のキングをシミュレートします。

出来ますか？

Answer 1

私はそれを理解しました、それは2つのオプションプロパティstartSpanとendSpanを使用することによって可能です。

多分それは私がここに貼り付けている他の誰かのために役立つでしょうサンプルHTMLスニップと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>

および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
                        }
        });