Update jQuery input range value

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) {
        x = Number(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", function() {
        var id = this.id;
        var red = $("#red").val();
        var green = $("#green").val();
        var blue = $("#blue").val();

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

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

        //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", function() {
        var id = $(this).attr('class');
        $('input[id=' + id + ']').val(this.value);
    });

    //Mouse Wheel
    $('input[type=range]').on('mousewheel', function(event) {
        event.preventDefault();
        var e = event.originalEvent;
        var roda = (e.wheelDelta) ? e.wheelDelta : -(e.detail || e.deltaY);

        console.log(roda)
        if (roda < 0) this.stepUp();
        else if (roda > 0) this.stepDown();
        $(this).change();
    });
});