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

Kalen Loncar
Kalen Loncar
8,743 Points
Posted by Kalen Loncar
Kalen Loncar
8,743 Points

Drawing Application Slider Preview

Hello,

My code runs exactly as it's supposed to up until this point. At the end of the video, when Andrew Chalkley changes the #newColor preview by clicking and moving one of the sliders, the #newColor preview changes as he is moving the slider. On my screen however, the preview only changes when I move the slider and let go of the mouse. I tried fixing this myself by using the .mousedown() and .mousemove() mouse events with no success. I am using the latest version of Chrome. Any help would be greatly appreciated. I removed all comments for readability.

var color = $(".selected").css("background-color");

$(".controls li").click(function(){
    $(this).siblings().removeClass("selected");
    $(this).addClass("selected");
    color = $(this).css("background-color");
})


$('#revealColorSelect').click(function(){
    changeColor();
    $("#colorSelect").toggle();
})

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

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

2 Answers

Brian McNitt
Brian McNitt
10,314 Points
Brian McNitt
Brian McNitt
10,314 Points

Yep. Same for me. I tried using earlier versions of jQuery and downloaded the finished project files but the behavior is the same. The following only fires on mouse up.

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

This matches what is stated in the jQuery documentation for .change().

"The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus."

Given this, not sure how Andrew Chalkley gets the script to read continuous data from the <input type="range">.

Ryan Carson
Ryan Carson
23,287 Points
Ryan Carson
Ryan Carson
23,287 Points

Here is the answer to this. All the best!