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

JavaScript jQuery Basics (2014) Creating a Simple Drawing Application Perform: Part 2

Jeffrey Watson
Jeffrey Watson
7,059 Points
Posted by Jeffrey Watson
Jeffrey Watson
7,059 Points

Change Color Function

When I move the sliders on this project the color only changes when I release my mouse pointer. On your example it seems to be working as you move the slider. I am using the latest version of chrome, only on a windows machine, not a mac? Would this be why?

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jeffrey,

This is actually the correct behavior for the "change" event. It only goes off once when you've released the slider. It worked out in the video because at the time of recording, chrome had an incorrect implementation of the "change" event. It was working the way the "input" event works.

The "input" event would be the correct event to use here because it goes off whenever an input value changes. So it will go off repeatedly as you drag the slider because you're repeatedly changing it's value.

$("input[type=range]").on("input", changeColor);

Cale Matteson
Cale Matteson
11,303 Points
Cale Matteson
Cale Matteson
11,303 Points

Hi Jeffrey and Jason,

"input" is indeed what you're looking for to get the immediate result like its shown in the video. However; since he does mention graceful degradation in the beginning of the section I feel like its worth noting that input is relatively* new. Therefore; if you want it to degrade nicely for older browsers consider sticking with ".change".

*Basically modern browsers released post 2011 (ie. IE9+).

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

For graceful degradation (or progressive enhancement) I think it would be better to work in both events. That way more capable browsers that support the input event will get a real time update of the color and older browsers will get a lesser but still functional experience.

I'm not sure how much of an issue this is though. We're drawing on the canvas in this project. I don't know if there are any browsers which support canvas but not the input event. Those would be the only ones where you'd want to fallback to the change event.