Update jQuery input range value

by Andrey Aires

HTML

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

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

JavaScript

jQuery(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--;                
                }
            }
        });

    });