0

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>
nnnnnn
  • 147,572
  • 30
  • 200
  • 241
foo
  • 21
  • 5
  • 3
    what did you try and what are you struggling with? - http://meta.stackexchange.com/a/128553 – Ulrich Dangel May 21 '12 at 05:45
  • I have successfully getting the input out, but however, I am stuck at putting the color in it, where it will change color. For example, I slide to the left, my input text will show -1, but I am stuck at putting the code in to change the color to red, so I wondered how do i do it. Thanks for pointers and help. Much appreciated. – foo May 21 '12 at 05:52
  • Could you please show your existing code, and perhaps set up a demo at http://jsfiddle.net. – nnnnnn May 21 '12 at 06:00
  • Thank you all for responding. I am not sure how to add the UI in jsfiddle.net, it doesn't seem able to display the slider. Here's my code:-

    – foo May 21 '12 at 06:18
  • A fiddle needs to include appropriate CSS info (I've included the base jquery-ui.css for you): http://jsfiddle.net/UweCD/1/ – nnnnnn May 21 '12 at 07:22

1 Answers1

0

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...

nnnnnn
  • 147,572
  • 30
  • 200
  • 241
  • Thank you sir/madam! This is what I need. It definitely get me started. Thank you so much! – foo May 21 '12 at 12:48