views:

140

answers:

1

How do,

I've been teaching myself a little basic jQuery recently, doing so I stumbled across the idea of adding a slider to change the background colour of my page. I've figured out the .click and .css parts ok - it works fine with a div, which is incredibly exciting; but I'm having a little trouble implementing it using a range. I think it's just a problem with targeting but I've hit a bit of a wall and would very much appreciate your assistance :)

Stuck a demo page up here: http://www.weleasewodewick.com/redesign2/test.php

Page is making use of http://flowplayer.org/tools/demos/rangeinput/index.html alongside the default jQuery library.

Script:

<script type='text/javascript'>
    $(function(){
        $(":range").click(function () {
            $("body").css("background","red");
        });
    });
</script>

Range:

<input type="range" name="background_pick" min="1" max="5" step="1" value="3" />
<script>$(":range").rangeinput();</script>

Hope this is clear enough - if you need any more detail just let me know.

FIXED

Thanks to the answers and comments below, the test.php linked above is now operational, will leave it up there for anyone wanting to study it themselves.

+2  A: 

Im not exactly sure what you are trying to do here but t seems the range input doesnt have a click event. Change it to "change" and it works.

$(":range").change(function () {
    $("body").css("background","red");
});
Fabian
That does indeed appear to work. Will combine this with a new selector as per Nicks comment ... cheers Fabian!
foxed