Skip to content

Instantly share code, notes, and snippets.

@fth-tuts

fth-tuts/index.html

Forked from anonymous/index.html
Created August 1, 2015 19:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save fth-tuts/2452e51a1b0abde2e847 to your computer and use it in GitHub Desktop.
Save fth-tuts/2452e51a1b0abde2e847 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/isafud/10
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style id="jsbin-css">
body {
background: #333;
width: 90%;
margin: 0 auto;
}
.rect {
width: 90%;
height: 300px;
border: 8px solid #fff;
outline: 1px solid #000;
background-color: #000;
margin: 24px 0;
}
.sliders > input {
width: 90%;
display: block;
margin-bottom: 30px;
}
input[type='range'] {
-webkit-appearance: none !important;
background:green;
height:7px;
border-radius: 10px;
height: 20px
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background:blue;
height:40px;
width:40px;
border-radius: 20px;
cursor: pointer;
border: 2px solid #000;
}
</style>
</head>
<body>
<div class="rect"></div>
<div class="sliders">
<input type="range" id="red" min="0" max="255" value="255" />
<input type="range" id="green" min="0" max="255" value="255" />
<input type="range" id="blue" min="0" max="255" value="255" />
<input type="range" id="alpha" min="0" max="100" value="100"/>
</div>
<div class="inputs">
<input type="text" id="hex" value="#000000">
</div>
<script id="jsbin-javascript">
var $sliders = $(".sliders").find("input"),
$target = $(".rect"),
rgba = {
red: 0,
green: 0,
blue: 0,
alpha: 1
},
$hex = $("#hex");
$sliders.on("change", function(e){
var key = this.id;
rgba[key] = (key == "alpha") ? parseFloat(this.value / 100).toFixed(2).replace(/\.?0+$/, "") : this.value;
var bg = "rgba("+rgba.red+", "+rgba.green+", "+rgba.blue+", "+rgba.alpha+")";
changeBgColor($target, bg);
$hex.val(rgbToHex( parseInt(rgba.red, 10), parseInt(rgba.green, 10), parseInt(rgba.blue, 10) ) );//.trigger("keyup");
});
$hex.on("keyup", function(e) {
var bg = this.value || "#000000";
changeBgColor($target, bg);
});
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
function changeBgColor(el, bg) {
el.css("background-color", bg);
}
</script>
<script id="jsbin-source-css" type="text/css">body {
background: #333;
width: 90%;
margin: 0 auto;
}
.rect {
width: 90%;
height: 300px;
border: 8px solid #fff;
outline: 1px solid #000;
background-color: #000;
margin: 24px 0;
}
.sliders > input {
width: 90%;
display: block;
margin-bottom: 30px;
}
input[type='range'] {
-webkit-appearance: none !important;
background:green;
height:7px;
border-radius: 10px;
height: 20px
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background:blue;
height:40px;
width:40px;
border-radius: 20px;
cursor: pointer;
border: 2px solid #000;
} </script>
<script id="jsbin-source-javascript" type="text/javascript">var $sliders = $(".sliders").find("input"),
$target = $(".rect"),
rgba = {
red: 0,
green: 0,
blue: 0,
alpha: 1
},
$hex = $("#hex");
$sliders.on("change", function(e){
var key = this.id;
rgba[key] = (key == "alpha") ? parseFloat(this.value / 100).toFixed(2).replace(/\.?0+$/, "") : this.value;
var bg = "rgba("+rgba.red+", "+rgba.green+", "+rgba.blue+", "+rgba.alpha+")";
changeBgColor($target, bg);
$hex.val(rgbToHex( parseInt(rgba.red, 10), parseInt(rgba.green, 10), parseInt(rgba.blue, 10) ) );//.trigger("keyup");
});
$hex.on("keyup", function(e) {
var bg = this.value || "#000000";
changeBgColor($target, bg);
});
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
function changeBgColor(el, bg) {
el.css("background-color", bg);
} </script></body>
</html>
Raw
jsbin.isafud.css
body {
background: #333;
width: 90%;
margin: 0 auto;
}
.rect {
width: 90%;
height: 300px;
border: 8px solid #fff;
outline: 1px solid #000;
background-color: #000;
margin: 24px 0;
}
.sliders > input {
width: 90%;
display: block;
margin-bottom: 30px;
}
input[type='range'] {
-webkit-appearance: none !important;
background:green;
height:7px;
border-radius: 10px;
height: 20px
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
background:blue;
height:40px;
width:40px;
border-radius: 20px;
cursor: pointer;
border: 2px solid #000;
}
Raw
jsbin.isafud.js
var $sliders = $(".sliders").find("input"),
$target = $(".rect"),
rgba = {
red: 0,
green: 0,
blue: 0,
alpha: 1
},
$hex = $("#hex");
$sliders.on("change", function(e){
var key = this.id;
rgba[key] = (key == "alpha") ? parseFloat(this.value / 100).toFixed(2).replace(/\.?0+$/, "") : this.value;
var bg = "rgba("+rgba.red+", "+rgba.green+", "+rgba.blue+", "+rgba.alpha+")";
changeBgColor($target, bg);
$hex.val(rgbToHex( parseInt(rgba.red, 10), parseInt(rgba.green, 10), parseInt(rgba.blue, 10) ) );//.trigger("keyup");
});
$hex.on("keyup", function(e) {
var bg = this.value || "#000000";
changeBgColor($target, bg);
});
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
function changeBgColor(el, bg) {
el.css("background-color", bg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment