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 3

cristian gherghel
cristian gherghel
6,259 Points
Posted by cristian gherghel
cristian gherghel
6,259 Points

How can i update the slider color in real time? cause is updating on release slider only.

hi, i have an issue, when i move the sliders, the color on the span element, does not update in real time. It updates only when i release the mouse on the slider. Any ideea?

5 Answers

David Clausen
David Clausen
11,403 Points
David Clausen
David Clausen
11,403 Points

Hey on("input", changeColor) works perfect for this. .change() only triggers after release. on() triggers repeatedly and is a better solution for this project as you change little to nothing of the HANDED html. 

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

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

So you can use the exact same code as the teacher by changing change to on like above.

cristian gherghel
cristian gherghel
6,259 Points
cristian gherghel
cristian gherghel
6,259 Points

Hey Floris, thanks for the answer but i have found a similar solution, with oninput function :)

here is the code:

HTML: ----------------------------------- <!--

               <div id="colorSelect">
        <span id="newColor"></span>
        <div class="sliders">
            <p>
                <label for="red">Red</label>
                <input id="red" name="red" type="range" min=0 max=255 value=0 oninput="changeColor()">
            </p>
            <p>
                <label for="green">Green</label>
                <input id="green" name="green" type="range" min=0 max=255 value=0 oninput="changeColor()">
            </p>
            <p>
                <label for="blue">Blue</label>
                <input id="blue" name="blue" type="range" min=0 max=255 value=0 oninput="changeColor()">
            </p>
        </div>
        <div>
        <button id="addNewColor">Add Color</button>
        </div>
    </div>

----------------------------------- -->

JAVASCRIPT - JQUERY:

----------------------------------- <!--

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

----------------------------------- -->

moonshine
moonshine
8,449 Points

Agreed, that's probably a better solution for this problem. I didn't realize that input tags were being used.

moonshine
moonshine
8,449 Points
moonshine
moonshine
8,449 Points

From the jQuery website: <br />

The click event is only triggered after this exact series of events:

  • The mouse button is depressed while the pointer is inside the element.
  • The mouse button is released while the pointer is inside the element.

Instead update on mousemove.

var active = false;

$("#target").mousedown(function (event) {
    if (event.which === 1) { // On left click only.
        active = true;
    }
});

$(window).mouseup(function () {
    active = false;
});

$(window).mousemove(function () {
    if (active) {
        // Code here.
    }
});
cristian gherghel
cristian gherghel
6,259 Points
cristian gherghel
cristian gherghel
6,259 Points

ya, sorry Floris, i forgot to mention that i was using input, probably cause i was asking the question from "inside the course" :) i will be more explicit next times :)

cristian gherghel
cristian gherghel
6,259 Points
cristian gherghel
cristian gherghel
6,259 Points

the perfect answer for me, David! :)