如何制作帶有條形顏色的范圍滑塊

Question

我想用帶有特殊條形顏色的javascript寫一個范圍滑塊，它不依賴於選擇器的位置。 我該怎么做 ？

我的靈感來自以下網站

Answer 1

使用jQuery：

http://jsfiddle.net/LP5XA/4/

HTML：

<div id="slider"></div>

CSS：

#slider
{
    background-color:red;
    background-position:left;
    background-repeat:no-repeat;
    background-size:10px;
}

Javascript：

$(function() {
    $( "#slider" ).slider(
    {
        slide:function(event, ui){
            //This is what the original code for this example looks like.
            //It's for changing the white/red area when the slider moves.
            //var w = $(ui.handle).css("left");
            //$(this).css("background-size",w);

            //Notice how when you set the "w" value to a static value it
            //will keep the white/red space static as well?  So you can 
            //change the colored space with whatever logic you want to use.
            $(this).css("background-size",50);
        }   
    });
});

做任何涉及更改背景的寬度和顏色的操作。 您所舉的示例網站似乎是根據對租購之間的門檻值以及一個人對另一個人變得理想時所進行的計算得出的。