Wie mache ich einen Bereich Slider mit spezic bar Farbe

Question

Ich würde gerne einen Bereich Slider in Javascript mit spezic bar Farbe schreiben, die nicht von der Position des Selektors abhängt. Wie kann ich es tun?

Meine Inspiration ist die folgende website

Answer 1

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

tun, was Sie wollen, die Breite und die Farbe des Hintergrundes zu tun beteiligt zu ändern. Es scheint, als ob die Website mit Ihrem Beispiel auf einer Berechnung basiert, die an der Schwelle zwischen Vermietung und Kauf gemacht wird und wenn einer gegenüber dem anderen ideal wird.