Search code examples
jqueryjquery-uicolorsjquery-ui-slider

changing box color with increment number or decrement number with jquery slider

I am a beginner of jQuery, and wondered if anyone can point me to the right direction. I wanted to create a slider where it changes color from red to green, and scores will be recorded. The value should start at 0, and as user slides to the right, the color turns red, and score of -1 is recorded. If it slides to the left, the color turns green and score of +1 is recorded. Please help.

JS:

$(function(){
   $( "#slider" ).slider({
      value:0,
      min: -3,
      max: 3,
      step: 1,
      slide: function( event, ui ) {
         $( "#score" ).val( ui.value );
      }
   });
   $( "#score" ).val($( "#slider" ).slider( "value" ) );
});

Html:

<html>
<p>
  <label for="score">Rating (+/-1 increment):</label>
  <input type="text" id="score" />
</p>
<div id="slider"></div>
</html>
Solution

  • Seems that setting the "background" CSS property does it. Is this what you mean: http://jsfiddle.net/UweCD/1/

        slide: function(event, ui) {
        $("#score").val(ui.value);
        $(this).css("background", ui.value>0 ? "green" : ui.value<0 ? "red" : "");
    }

    Should be enough to get you started anyway...