如何制作带有条形颜色的范围滑块

Question

I would like to write a range slider in javascript with spefic bar color that does not depend on the position of the selector. How can I do it ?

My inspiration is the following website

Answer 1

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

Do whatever you want to do involving changing the width and color of the background. It seems like the website with your example does it based off a calculation done on the threshold between renting and buying and when one becomes ideal over another.