prototypejs - Script.aculo.us 2 色のスライダー

Question

2 つのハンドルの間の領域に、トラックの背景色以外に別の色を定義するにはどうすればよいですか?

2013 年 8 月 6 日更新: 次の HTML を使用して、2 つのハンドルを持つ価格帯スライダーを作成しました。

<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);
        }
    });
});

現在のスライダー:

希望のスライダー: