color de fondo del control deslizante jquery

Soy nuevo en la progtwigción web y estoy tratando de crear un sitio web que contenga un control deslizante. Actualmente estoy usando jquery para crear el control deslizante. Estoy tratando de cambiar el color de fondo del control deslizante a rojo cuando el valor del control deslizante es menor que 5 y al verde cuando es mayor que 5. ¿Cómo puedo lograr esto? ¿Tendría que usar CSS para lograr esto? Si es así, ¿cómo se supone que debo integrar CSS junto con el código jquery?

Aquí está mi progreso hasta ahora:

EDITAR Intenté usar .css () en el elemento del control deslizante y establecer la propiedad de background-color en #ff0000 , pero eso no funcionó.

     <a href="https://jquery.dokry.com/jquery/jquery" title="Topics of jQuery" target="_blank">jQuery</a> UI Slider - Range with fixed maximum      $(function() { $( "#slider-range-max" ).slider({ range: "min", min: 0, max: 10, value: 0, step: .001, slide: function( event, ui ) { $( "#amount" ).val( ui.value ); if(ui.value < 5){ $("#amount").attr("style","border:0; color:#ff0000; font-weight:bold;"); $( "#slider-range-max" ).css("background-color","#ff0000"); } else $("#amount").attr("style","border:0; color:#00ff00; font-weight:bold;"); } }); $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) ); });    

La interfaz de usuario de jQuery utiliza el background propiedad background que es más importante que el background-color de su propiedad. Cambie su $( "#slider-range-max" ).css("background-color","#ff0000"); a $( "#slider-range-max" ).css("background","#ff0000"); y funciona.

Además, no olvide incluir el cambio de fondo en su else statement, o permanecerá en rojo, incluso cuando la cantidad sea superior a 5.

Mira esto: jsFiddle . Vea si esto funciona para lo que necesita.

 $(function() { $( "#slider-range-max" ).slider({ range: "min", min: 0, max: 10, value: 0, step: .001, slide: function( event, ui ) { $( "#amount" ).val( ui.value ); if(ui.value < 5){ $("#amount").attr("style","border:0; color:#ff0000; font-weight:bold;"); $('#slider-range-max').removeClass('green'); $('#slider-range-max').addClass('red'); } else{ $("#amount").attr("style","border:0; color:#00ff00; font-weight:bold;"); $('#slider-range-max').removeClass('red'); $('#slider-range-max').addClass('green'); } } }); $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) ); }); .ui-widget-header{ background: none; } .red .ui-slider-range { background-color: #ff0000; } .green .ui-slider-range { background-color: #00ff00; } 

Usa una sentencia if como esta. El color predeterminado debe ser rojo (# ff0000) y cuando el valor de #amount es> 5, el color se anima a verde.

 if($('#amount').val(); > 5){ $('#amount').animate({"color":"#00ff00"}, 1000); }else{ $('#amount').animate({"color":"#ff0000"}, 1000); 

Alternativamente, puede usar $('#amount').css("color":"#00ff00"); para cambiarlo instantáneamente a verde en lugar de una animación.

Consejo rápido: use comillas simples para sus selectores jQuery. Las comillas dobles romperán algunos selectores como este $("#elem[type="text"]") porque termina la comilla abierta con la primera comilla cerrada que encuentra.