jQuery did not update the "live" input values

Asked

Viewed 207 times

1

Hello,

I am creating a RGB color selection tool with a slider input[type=range], but when I start mousewheel it doesn’t seem to update instantly:

https://jsfiddle.net/AndreyAires/m3474ss1/1/

index.html: 

<head>
    <title>RGB Controller</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <header class="title">
        <h1>RGB Controller</h1>
    </header>
    <article>
        <div class="controls">
            <h2>Controls</h2>
            <label for="red">Red</label>
            <input id="red" name="red" type="range" min="0" max="255" value="0">
            <label for="green">Green</label>
            <input id="green" name="green" type="range" min="0" max="255" value="0">
            <label for="blue">Blue</label>
            <input id="blue" name="blue" type="range" min="0" max="255" value="0">
            <p>Red: <input type="number" class="red" min="0" max="255" value="0"> Green: <input type="number" class="green" min="0" max="255" value="0"> Blue: <input type="number" class="blue" min="0" max="255" value="0"></p>
            <p>Hex: #<span class="hexcode_red">00</span><span class="hexcode_green">00</span><span class="hexcode_blue">00</span></p>
        </div>
        <div class="result">
            <h2>Result</h2>
            <div id="result-screen">
                <div class="circle" id="render_red_black"></div>
                <div class="circle" id="render_green_black"></div>
                <div class="circle" id="render_blue_black"></div>

                <div class="circle" id="render_red"></div>
                <div class="circle" id="render_green"></div>
                <div class="circle" id="render_blue"></div>
            </div>
        </div>
    </article>
    <script src="js/jquery-2.2.4.js"></script>
    <script src="js/rgb_controller-0.3.js"></script>
</body>

</html>

rgb_controller-0.3.js:

$(document).ready(function () {

    //Hexadecimcal Function
    function hex(x) {

        var hexDigits = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];

        return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
    }

    //Slider Function
    $('input[type=range]').on("change mousemove mousewheel DOMMouseScroll", function () {

        var id = $(this).attr('id');
        var val = parseInt($(this).val());

        var red = $("#red").val();
        var green = $("#green").val();
        var blue = $("#blue").val();

        $('input[class=' + id + ']').val(val);

        $('span[class=hexcode_' + id + ']').text(hex(val));

        //Render View
        $('#render_red').css('background-color', 'rgb(' + red + ', 0, 0)');
        $('#render_green').css('background-color', 'rgb(0, ' + green + ', 0)');
        $('#render_blue').css('background-color', 'rgb(0, 0, ' + blue + ')');
    });

    //Text to slider
    $('input[type=number]').on("click keyup mousewheel DOMMouseScroll", function () {
        var id = $(this).attr('class');
        var val = parseInt($(this).val());

        $('input[id=' + id + ']').val(val);

    });

    //Mouse Wheel
    $('input').on('mousewheel DOMMouseScroll', function(event){
        var val = parseInt($(this).val());
        var id = $(this).attr('id');

        if ( event.originalEvent.wheelDelta > 0 ) {
            if( id ){
                document.getElementById( id ).stepUp();
            } else {
                val++;
            }
        }
        else if( event.originalEvent.wheelDelta < 0 ) {
            if( id ){
                document.getElementById( id ).stepDown();
            } else {
                val--;                
            }
        }
    });

});

style.css:

.title {
    width: 600px;
    text-align: left;
    padding: 20px;
    margin-left: 20px;
}

label {
    float: left;
    clear: left;
    min-width: 100px;
}

input[type*="range"] {
    float: left;
    clear: right;
    width: 300px;
}
input[type*="number"] {
    width: 35px;
    border: 0;
    font-size: 11px;
    font-family: monospace;
    border-bottom: 1px dotted red;
}

p {
    width: inherit;
    float: inherit;
}

.controls {
    width: 500px;
    height: 300px;
    float: left;
}

.result {
    float: left;
    width: 400px;
    height: 400px;
}

#result-screen {
    position: relative;
    width: 400px;
    height: 350px;
}

.circle {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
}

#render_red,
#render_green,
#render_blue {
    mix-blend-mode: screen;
}

#render_red_black,
#render_green_black,
#render_blue_black {
    background-color: black;
}

#render_red,
#render_red_black {
    left: 0;
}

#render_green,
#render_green_black {
    left: 50px;
    bottom: 0;
}

#render_blue,
#render_blue_black {
    right: 0;
}
jquery input

  • At least the jsFiddle link you posted is working 100% for me in Chrome.

  • Whereupon I’m testing (in Chrome on Mac) try to associate scroll with API step[Up|Down] It is difficult because the scroll has tail and is shooting the event. Moreover it does not have much precision... Take a look at my jsFiddle, there are some simplifications that might be worth it. Otherwise I think it’s a pointy case and you’ll have to make compromises.

  • Thank you Sergio, its simplified version worked that is a beauty!

No answers

Browser other questions tagged jquery input

You are not signed in. Login or sign up in order to post.