Question

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.

Answer 1

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");
});