Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Li Xia
4,671 PointsChanging colors with sliders
With the following code, the color of the #newColor span changes on mouse up of the slider. How can this be improved so the #newColor span updates while the slider is being manipulated?
//When new color is pressed
$("#revealColorSelect").click(function(){
//Show color select or hide the color select
changeColor();
$("#colorSelect").toggle();
});
//update the new color span
function changeColor(){
var r = $("#red").val();
var g = $("#green").val();
var b = $("#blue").val();
$("#newColor").css("background-color", "rgb(" + r + "," + g + "," + b + ")");
}
//When color sliders change
$("input[type=range]").change(changeColor);
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Li,
The "input" event is the correct event to be listening for in this case.
The "change" event is only supposed to go off one time after you've committed a value or if the element loses focus. So it's actually working the way it is supposed to. The reason it works differently in the video is because chrome had an incorrect implementation of the "change" event where it would fire off repeatedly as you dragged the slider.
The "input" event is supposed to go off every time a user changes the value of an input. When you drag the slider around you're repeatedly changing its value and so that event will go off repeatedly which allows you to get immediate feedback on the color.
This should work better for you:
$("input[type=range]").on("input", changeColor);
Li Xia
4,671 PointsAwesome, thanks Jason!