scriptaculous - 在 2 个滑块手柄之间更改轨道颜色

Question

我正在使用 Script.aculo.us Slider.js 来显示双滑块。它工作得很好。我想要做的是更改颜色以仅在这两个滑块之间进行跟踪。

例如，如果第一个滑块的值为 5，第二个滑块的值为 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
                        }
        });