CODEWITHSUNDEEP
javascripthtmljquerycssslider
joehigh1
joehigh1

Reputation: 193

Using range slider to change HSL background color with javascript

I'm trying to use a range slider to edit the background color, but it isn't working, where am I going wrong here:

My range slider:

<input id="ex2" name="ex2' type="range" min="0" max="360" step="1" />

And my Javascript:

$(document).ready(function(){

var slider = document.getElementById("ex2");

$(slider).on('input', function () {

    var hue = $(this).val();

    var hsl = 'hsl('+ hue +', 50%, 50%)';

    console.log(hsl);

$(body).css({'background-color' : hsl });

});

});

Also here:

https://jsfiddle.net/oqt1vhmj/2/

Upvotes: 0

Views: 481

Answers (2)

Thanasis Balatsoykas
Thanasis Balatsoykas

Reputation: 176

The fiddle isn't running because you need to change the resource from which you get the jQuery library. (error on ReferenceError: $ is not defined")

I added a different resource, for example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

and it runs fine!

here is the fiddle:

https://jsfiddle.net/noq2zd4f/8/

Upvotes: 0

m.cichacz
m.cichacz

Reputation: 749

Did you check console for any errors?

Just fixed a small typo and all works fine:

$(document).ready(function(){

    var slider = document.getElementById("ex2");

    $(slider).on('input', function () {

        var hue = $(this).val();

        var hsl = 'hsl('+ hue +', 50%, 50%)';

        console.log(hsl);

        $('body').css({'background-color' : hsl });
        //  ^--- typo here

    });

});

Upvotes: 1

Related Questions