<!--- 
Have fun :) 
-->


<div class="container">
	<div class="bgleft"></div>
	<div class="bgright"></div>

	<div class="imagecontainer">
		<div class="picborder"></div>
		<img id="pic" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/443195/Pic3_1k.png" alt="picture of a toy car">
	</div>

	<div class="slidercontainer">
		<div class="sliderblock">
			<div class="val" id="slider1value">100%</div>
			<input class="slider" id="slider1" type="range" min="0" max="500" value="100">
			<label for="slider1">brightness</label>
		</div>
		<div class="sliderblock">
			<div class="val" id="slider2value">100%</div>
			<input class="slider" id="slider2" type="range" min="0" max="500" value="100">
			<label for="slider2">contrast</label>
		</div>
		<div class="sliderblock">
			<div class="val" id="slider3value">100%</div>
			<input class="slider" id="slider3" type="range" min="0" max="500" value="100">
			<label for="slider3">saturate</label>
		</div>
		<div class="sliderblock">
			<div class="val" id="slider4value">0%</div>
			<input class="slider" id="slider4" type="range" min="0" max="100" value="0">
			<label for="slider4">grayscale</label>
		</div>
		<div class="sliderblock">
			<div class="val" id="slider5value">0%</div>
			<input class="slider" id="slider5" type="range" min="0" max="100" value="0">
			<label for="slider5">invert</label>
		</div>
		<div class="sliderblock">
			<div class="val" id="slider6value">0°</div>
			<input class="slider" id="slider6" type="range" min="0" max="360" value="0">
			<label for="slider6">hue rotate</label>
		</div>
		<div class="sliderblock">
			<div class="val" id="slider7value">0px</div>
			<input class="slider" id="slider7" type="range" min="0" max="20" value="0">
			<label for="slider7">blur</label>
		</div>
		<div class="sliderblock">
			<div class="val" id="slider8value">100%</div>
			<input class="slider" id="slider8" type="range" min="0" max="100" value="0">
			<label for="slider8">opacity</label>
		</div>
		<div class="sliderblock">
			<div class="val" id="slider9value">0%</div>
			<input class="slider" id="slider9" type="range" min="0" max="100" value="0">
			<label for="slider9">sepia</label>
		</div>
		<div class="sliderblock">
			<div class="val" id="slider10value">0px</div>
			<input class="slider" id="slider10" type="range" min="0" max="30" value="0">
			<label for="slider10">drop shadow</label>
		</div>
	</div>

</div>

<button id="reset">reset</button>

<a id="insta" class="somelinks" href="https://www.instagram.com/diffthingies/" target=”_blank”><i class="fab fa-instagram" aria-hidden="true"></i></a>
<a id="twit" class="somelinks" href="https://twitter.com/mrvalaty" target=”_blank”><i class="fab fa-twitter" aria-hidden="true"></i></a>
body {
	background: #333;
	margin: 0;
	overflow: hidden;
	color: white;
}
.container{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}

.bgleft,
.bgright {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	background: #33d;
}

.bgright {
	right: 0;
	background: #73d;
}

#reset{
	position: absolute;
	top: 10px;
	left: 50%;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border: 1px solid #fff;
	transform: translate(-50%, 0);
	font-family: monospace;
	cursor: pointer;
	color: #fff;
	box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.2);
}

#reset:focus,
#reset:hover{
	box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.5);
}

.imagecontainer {
	position: absolute;
	top: 8vh;
	left: 15vw;
	height: 40vh;
	width: 70vw;
}

img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	height: auto;
}

.picborder {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 62vw;
	height: calc(64vw * 0.63);
	background: #fff;
}

.slidercontainer {
	position: absolute;
	top: 55vh;
	left: 5vw;
	height: 45vh;
	width: 90vw;
	display: flex;
	justify-content: space-evenly;
}

.sliderblock {
	width: 8vw;
	padding: 0;
}

.slider {
	position: relative;
	top: calc(20vh - 16px);
	left: calc(4vw - 10px);
	width: 20vh;
	margin: 0;
	transform: rotate(-90deg);
	transform-origin: 0 0;
}

label {
	position: relative;
	display: block;
	font-family: monospace;
	top: 32vh;
	height: 8vw;
	width: 80px;
	text-align: left;
	line-height: 8vw;
	white-space: nowrap;
	transform-origin: 0 0;
	transform: rotate(-90deg);
}

.val {
	/*display: none;*/
	position: relative;
	transform: rotate(0deg);
	display: block;
	font-family: monospace;
	top: calc(42vh - 16px);
	height: 16px;
	width: 100%;
	text-align: center;
	visibility: hidden;
}

/*Desktop Stuff i.e. if larger than 900*/
@media only screen and (min-width: 820px) {
	.imagecontainer {
		top: 15vh;
		left: 30vw;
		height: 40vh;
		width: 40vw;
	}
	.picborder {
		width: 37vw;
		height: calc(38vw * 0.63);
		background: #fff;
	}

	.slidercontainer {
		top: 65vh;
		left: 10vw;
		height: 35vh;
		width: 80vw;
	}

	.sliderblock {
		top: 60vh;
		height: 25vh;
		width: 8vw;
		padding: 0;
	}

	.slider {
		left: calc(4vw - 10px);
		width: 20vh;
		margin: 0;
		transform: rotate(-90deg);
		transform-origin: 0 0;
	}

	label {
		position: relative;
		display: block;
		font-family: monospace;
		top: 20vh;
		height: 5vh;
		width: 100%;
		text-align: center;
		line-height: 5vh;
		white-space: nowrap;
		transform: rotate(0deg);
	}

	.val {
		/*display: none;*/
		position: relative;
		transform: rotate(0deg);
		display: block;
		font-family: monospace;
		top: calc(32vh - 16px);
		height: 16px;
		width: 100%;
		text-align: center;
	}
}

/* Styling the sliders*/
input[type="range"] {
	-webkit-appearance: none;
	background: transparent;
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
}
input[type="range"]:focus {
	outline: none;
}
input[type="range"]::-ms-track {
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	color: transparent;
}

/*New range styles*/
input[type="range"]::-webkit-slider-runnable-track {
	height: 2px;
	cursor: pointer;
	background: #fff;
	margin-top: 10px;
	box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.2);
}

input[type="range"]::-webkit-slider-thumb {
	height: 20px;
	width: 20px;
	border-radius: 10px;
	background: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -9px;
	box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.2);
}

input[type="range"]:focus::-webkit-slider-runnable-track {
	box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.5);
}

input[type="range"]:focus::-webkit-slider-thumb {
	box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.5);
}

input[type="range"]::-moz-range-track {
	width: 100%;
	height: 2px;
	cursor: pointer;
	background: #fff;
	box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.2);
}
input[type="range"]::-moz-range-thumb {
	height: 20px;
	width: 20px;
	border-radius: 20px;
	background: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -9px;
	box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.2);
}

input[type="range"]:focus::-moz-range-track {
	box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.5);
}

input[type="range"]:focus::-moz-range-thumb {
	box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.5);
}

input[type="range"]::-ms-track {
	width: 100%;
	height: 2px;
	cursor: pointer;
	background: #fff;
}

input[type="range"]::-ms-thumb {
	height: 20px;
	width: 20px;
	border-radius: 20px;
	background: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: 0px;
}

input[type="range"]:focus::-ms-fill-lower {
	box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.4);
}
input[type="range"]:focus::-ms-fill-upper {
	box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.4);
}

/*social*/
#insta,
#twit {
	position: absolute;
	top: 0;
	font-size: 20px;
	margin: 10px;
	cursor: pointer;
	color: #fff;
}
#twit {
	right: 0;
}


/*prevent defaults*/
button,
p{
	display: inline-block;
	border: none;
	margin: 0;
	text-decoration: none;
	padding: 0;
	background: none;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	overflow: hidden;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

button:focus {
	outline: none;
	color: black;
}

textarea:focus {
	outline: none;
}
select:focus {
	color: #000;
}
a,
a:link,
a:visited {
	color: var(--maincolor);
}
//Properties
let brightness = 100;
let contrast = 100;
let saturate = 100;
let grayscale = 0;
let invert = 0;
let huerotate = 0;
let blur = 0;
let opacity = 100;
let sepia = 0;
let dropshadow = 0;

//Elemets
const picture = document.getElementById("pic");
const reset = document.getElementById("reset");

const slider1 = document.getElementById("slider1");
const value1 = document.getElementById("slider1value");
const slider2 = document.getElementById("slider2");
const value2 = document.getElementById("slider2value");
const slider3 = document.getElementById("slider3");
const value3 = document.getElementById("slider3value");
const slider4 = document.getElementById("slider4");
const value4 = document.getElementById("slider4value");
const slider5 = document.getElementById("slider5");
const value5 = document.getElementById("slider5value");
const slider6 = document.getElementById("slider6");
const value6 = document.getElementById("slider6value");
const slider7 = document.getElementById("slider7");
const value7 = document.getElementById("slider7value");
const slider8 = document.getElementById("slider8");
const value8 = document.getElementById("slider8value");
const slider9 = document.getElementById("slider9");
const value9 = document.getElementById("slider9value");
const slider10 = document.getElementById("slider10");
const value10 = document.getElementById("slider10value");

//update the filters
function updateFilters() {
	picture.style.filter =
		"brightness(" +
		brightness +
		"%) contrast(" +
		contrast +
		"%) saturate(" +
		saturate +
		"%) grayscale(" +
		grayscale +
		"%) invert(" +
		invert +
		"%) hue-rotate(" +
		huerotate +
		"deg) blur(" +
		blur +
		"px) opacity(" +
		opacity +
		"%) sepia(" +
		sepia +
		"%) drop-shadow(0px 0px " +
		dropshadow +
		"px rgba(0, 0, 0, 0.5))";
}

//reset filters
reset.addEventListener("click", function() {
	console.log("resset");
	brightness = 100;
	slider1.value = 100;
	value1.innerHTML = slider1.value + "%";
	contrast = 100;
	slider2.value = 100;
	value2.innerHTML = slider2.value + "%";
	saturate = 100;
	slider3.value = 100;
	value3.innerHTML = slider3.value + "%";
	grayscale = 0;
	slider4.value = 0;
	value4.innerHTML = slider4.value + "%";
	invert = 0;
	slider5.value = 0;
	value5.innerHTML = slider5.value + "%";
	huerotate = 0;
	slider6.value = 0;
	value6.innerHTML = slider6.value + "px";
	blur = 0;
	slider7.value = 0;
	value7.innerHTML = slider7.value + "°";
	opacity = 100;
	slider8.value = 0;
	value8.innerHTML = 100 - slider8.value + "%";
	sepia = 0;
	slider9.value = 0;
	value9.innerHTML = slider9.value + "%";
	dropshadow = 0;
	slider10.value = 0;
	value10.innerHTML = slider10.value + "px";
	updateFilters();
});

//brightness slider
slider1.addEventListener("input", function() {
	console.log(slider1.value);
	value1.innerHTML = slider1.value + "%";
	brightness = slider1.value;
	updateFilters();
});

slider1.addEventListener("focus", function() {
	console.log("focus gotten");
	value1.style.visibility = "visible";
});

slider1.addEventListener("blur", function() {
	console.log("focus lost");
	value1.style.visibility = "hidden";
});

//contrast slider
slider2.addEventListener("input", function() {
	value2.innerHTML = slider2.value + "%";
	contrast = slider2.value;
	updateFilters();
});

slider2.addEventListener("focus", function() {
	value2.style.visibility = "visible";
});

slider2.addEventListener("blur", function() {
	value2.style.visibility = "hidden";
});

//saturation slider
slider3.addEventListener("input", function() {
	value3.innerHTML = slider3.value + "%";
	saturate = slider3.value;
	updateFilters();
});

slider3.addEventListener("focus", function() {
	value3.style.visibility = "visible";
});

slider3.addEventListener("blur", function() {
	value3.style.visibility = "hidden";
});


//grayscale slider
slider4.addEventListener("input", function() {
	value4.innerHTML = slider4.value + "%";
	grayscale = slider4.value;
	updateFilters();
});

slider4.addEventListener("focus", function() {
	value4.style.visibility = "visible";
});

slider4.addEventListener("blur", function() {
	value4.style.visibility = "hidden";
});

//invert slider
slider5.addEventListener("input", function() {
	value5.innerHTML = slider5.value + "%";
	invert = slider5.value;
	updateFilters();
});

slider5.addEventListener("focus", function() {
	value5.style.visibility = "visible";
});

slider5.addEventListener("blur", function() {
	value5.style.visibility = "hidden";
});

//hue-rotate slider
slider6.addEventListener("input", function() {
	value6.innerHTML = slider6.value + "°";
	huerotate = slider6.value;
	updateFilters();
});

slider6.addEventListener("focus", function() {
	value6.style.visibility = "visible";
});

slider6.addEventListener("blur", function() {
	value6.style.visibility = "hidden";
});

//blur slider
slider7.addEventListener("input", function() {
	value7.innerHTML = slider7.value + "px";
	blur = slider7.value;
	updateFilters();
});

slider7.addEventListener("focus", function() {
	value7.style.visibility = "visible";
});

slider7.addEventListener("blur", function() {
	value7.style.visibility = "hidden";
});

//opacity slider
slider8.addEventListener("input", function() {
	value8.innerHTML = 100 - slider8.value + "%";
	opacity = 100 - slider8.value;
	updateFilters();
});

slider8.addEventListener("focus", function() {
	value8.style.visibility = "visible";
});

slider8.addEventListener("blur", function() {
	value8.style.visibility = "hidden";
});

//sepia slider
slider9.addEventListener("input", function() {
	value9.innerHTML = slider9.value + "%";
	sepia = slider9.value;
	updateFilters();
});

slider9.addEventListener("focus", function() {
	value9.style.visibility = "visible";
});

slider9.addEventListener("blur", function() {
	value9.style.visibility = "hidden";
});

//dropshadow slider
slider10.addEventListener("input", function() {
	value10.innerHTML = slider10.value + "px";
	dropshadow = slider10.value;
	updateFilters();
});

slider10.addEventListener("focus", function() {
	value10.style.visibility = "visible";
});

slider10.addEventListener("blur", function() {
	value10.style.visibility = "hidden";
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.