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

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

Jason Nelson
Jason Nelson
9,127 Points
Posted by Jason Nelson
Jason Nelson
9,127 Points

color selector slider issue

I noticed in the Jquery "create a simple drawing app" Perform Part 2 video that their color selector changes colors as they drag the RGB sliders. Mine only changes the color once I let go of the slider. I compared my code to the instructors and it seems to same.

Can anyone tell me if I did something wrong?

//Problem: No user interaction causes no change to application
//Solution: When user interacts cause changes appropriately
var color = $(".selected").css("background-color");

//When clicking on control list items
$(".controls li").click(function() {
  //Deselet sibling elements
  $(this).siblings().removeClass("selected");
  //select clicked element
  $(this).addClass("selected");
  //cache current color
  color = $(this).css("background-color");
});
  //Deselect sibling elements
  //Selet clicked element

//When new color is pressed
$("#revealColorSelect").click(function(){
  changeColor();
  $("#colorSelect").toggle();
  });
  //show color select or hide the color select

  //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);

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jason,

This is actually what's supposed to happen with the "change" event. The event only goes off once when you have committed the value or the input loses focus. When you drag around the slider you're committing the value when you release the mouse button.

The reason it worked correctly in the video is because chrome had a bug at the time the video was recorded. Instead of the "change" event going off once at the end it was going off repeatedly as you dragged the slider. It has since been fixed and now it doesn't work the way shown in the video.

The correct event that you want to listen for is the "input" event. This event goes off whenever you change an input value.

$("input[type=range]").on("input", changeColor);
Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Jason,

The project files contain more code that allow for real-time updates based around the mousedown, mousemove, mouseup and mouseleave events, take a look at that and it will allow you to do the same thing as the instructor in the video.