Hello,
I'm creating an RGB color selection tool with a input[type=range] slider, but when I run the mousewheel it does not seem to update instantly:
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;
}