prototypejs - Script.aculo.us 具有 2 种颜色的滑块

Question

如何为两个手柄之间的区域定义不同的颜色，而不是轨道的背景颜色？

2013 年 8 月 6 日更新： 我创建了一个带有两个手柄的价格范围滑块，带有以下 HTML

<div id="price_slider">
    <span id="price_handle_min">&gt;</span>
    <span id="price_handle_max">&lt;</span>
</div>

跟随 JS，使用 Prototype V1.7 & script.aculo.us slider.js v1.8.2

使用以下脚本来设置滑块：

Event.observe(window, 'load', function() {
    var handles = [$('price_handle_min'), $('price_handle_max')];
    var sliderValues = [0, 100];
    var slider = new Control.Slider(handles, 'price_slider', {
        range : $R(0, 100, false),
        step : 1,
        sliderValue : sliderValues,
        values : [0,20,40,60,80,100],
        restricted : true,
        onChange : function(val) {
            alert(val);
        },
        onSlide : function(val) {
            alert(val);
        }
    });
});

当前滑块：

所需的滑块：