jquery slider background color
css, html, javascript, jquery
Solution
jQuery UI uses the property `background` which is more important than your property `background-color`. Change your `$( "#slider-range-max" ).css("background-color","#ff0000");` to `$( "#slider-range-max" ).css("background","#ff0000");` and it works.
Also, don't forget to put the background change into your `else` statement, or else it'll stay red, even when amount is more than 5.
Problem
I am new to web programming and I am trying to create website that contains slider. I am currently using jquery to create the slider. I am trying to change the background color of the slider to red when the slider value is less than 5 and to green when it is greater than 5. How do I accomplish this? Would I have to use CSS to accomplish this? If so, how am I supposed to integrate CSS along with the jquery code. Here is my progress so far: EDIT I tried using .css() on the slider element and setting the `background-color` property to `#ff0000`, but that did not work. ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Slider - Range with fixed maximum</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(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" ) ); }); </script> </head> <body> <p> <label for="amount">Trust Value:</label> <input type="text" id="amount" style="border:0; color:#ff0000; font-weight:bold;"> </p> <div id="slider-range-max"></div> </body> </html> ```