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 Oliver Duncan
Oliver Duncan
16,642 Points

New color span isn't updating while I'm sliding, only after I'm done sliding

In the video, it looks like Andrew's new color span updates as the slider moves. Mine only updates after I'm done sliding. I'll post my code as soon as I figure out how to take a snapshot.

Oliver Duncan
Oliver Duncan
16,642 Points 
var $color = $(".selected").css("background-color");

function changeColor() {
  var r = $("#red").val();
  var g = $("#green").val();
  var b = $("#blue").val();
  $("#newColor").css("background-color", "rgb(" + r + "," + g + "," + b + ")");  
};

//Clicking on a color will:
$(".controls li").click(function() {
  //Deselect sibling elements
  $(this).siblings(".selected").removeClass("selected");
  //Select that color
  $(this).addClass("selected");
  //Cache selected color
  $color = $(this).css("background-color");
});

//Clicking on "New Color" button will:
$("#revealColorSelect").click(function() {
  //change new color span
  changeColor();
  //show/hide colorselect div
  $(this).next().toggle();
});

//When color sliders change, update new color span
$("input[type=range]").change(changeColor);

3 Answers

Adam Futrell
Adam Futrell
11,976 Points

This worked for me...

REPLACE

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

WITH

$("input[type=range]").on("input", changeColor);
Adam Futrell
Adam Futrell
11,976 Points

This is where I found my answer: http://stackoverflow.com/a/12797900/411256

Oliver Duncan
Oliver Duncan
16,642 Points

Thanks, works great. Now I'm just curious why .change() worked for Andrew but not for us!

Adam Futrell
Adam Futrell
11,976 Points

I think there certain things he used that are now deprecated, so they won't work. I believe this video series is 2 years old which is like 20 years in web programming.

Adam Futrell
Adam Futrell
11,976 Points

Oh and could you also mark my answer as the answer for this question so other people can tell that this was addressed? Thanks!

Mike LaPan
Mike LaPan
5,190 Points

Awesome. Thanks for this!

Martin Cornejo Saavedra
Martin Cornejo Saavedra
18,132 Points

Great input, this worked for me.

Carlos Enrique CastaƱeda GutiƩrrez
Carlos Enrique CastaƱeda GutiƩrrez
13,886 Points

Excuse me, there is something I dont understand about your .on().

According to the documentation you should put an event like "click" and then the function. Why you put "input", is that an event? I dont think so, it looks like a selector? Am I missing something?

Thanks for you answer.

Oliver Duncan
Oliver Duncan
16,642 Points

Carlos,

.click() is just shorthand for $.on("click", handler). Check out the docs for click and on.

Here's some info on 'input' too: https://developer.mozilla.org/en-US/docs/Web/Events/input

Wassim Murr
Wassim Murr
13,296 Points
Wassim Murr
Wassim Murr
13,296 Points

Thanks! Adam Futrell

Oluwaseun Talabi
Oluwaseun Talabi
3,691 Points
Oluwaseun Talabi
Oluwaseun Talabi
3,691 Points

Thanks! I was having the same issue and changing it to ' $("input[type=range]").on("input", changeColor); ' worked for me as well.