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

Posted by Greg Knudsen
Greg Knudsen
11,514 Points

Colors not updating dynamically

It's not a huge deal, and my code is working. However, in my browser (Chrome Version 43.0.2357.124 (64-bit)), the colors do not change dynamically like they do for Andrew. When I toggle the sliders, the colors only change when I release the click (which makes me want to look down this path as a possible solution). Thanks in advance!

Ryan Holdeman
Ryan Holdeman
8,067 Points

I'm having the same problem on my end with Firefox.

5 Answers

leong shing chew
leong shing chew
5,618 Points
leong shing chew
leong shing chew
5,618 Points

one thing you could do is add a separate event.

mousemove event should work here.

$('input[type=range]').change(changeColor).mousemove(changeColor);
fabio vella
fabio vella
3,548 Points

Well, in this case you don't really need

.change()

VISHAL DEEPAK
VISHAL DEEPAK
3,272 Points
VISHAL DEEPAK
VISHAL DEEPAK
3,272 Points

Had the same problem just use the code 

//Change this 
$("input[type=range]").change(changeColor);
//to this
$("input[type=range]").on("input",changeColor);
Suneal P
Suneal P
4,907 Points
Suneal P
Suneal P
4,907 Points

Thanks for sharing! This worked for me. Cool.

Minor note, there's a small typo in your code, should be changeColor in the final line.

Regardless, thanks for posting a fix Vishal!

Shane P
Shane P
11,047 Points
Shane P
Shane P
11,047 Points

I had the same issue. The best fix I have found is:

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

This code will dynamically update the color while dragging the slider, as well as clicking a random spot within the slider.

If you use:

$('input[type=range]').mousemove(changeColor);

the color slider will only update after moving the mouse. Try using this method and clicking a random spot within the slider instead of dragging it, if you leave your mouse still after clicking the color will not update.

stevenstabile
stevenstabile
9,763 Points
stevenstabile
stevenstabile
9,763 Points

I had the same issue and this worked like a charm, thanks! but...why did the teacher's example change dynamically??

$("input[type=range]").on("input", changeColor);
Josh Naylor
Josh Naylor
19,341 Points
Josh Naylor
Josh Naylor
19,341 Points

Good question! Any ideas?

Jim Withington
Jim Withington
12,025 Points

Wondering the same over here!

Jay G
Jay G
2,904 Points
Jay G
Jay G
2,904 Points

I had the same problem. I decided to not look here first and see if I could figure it out by using jQuery api docs, and was able to use the following:

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