This article explains, how to write code for image editor using HTML, CSS, Jquery, all code is explained via comments.

Let's create the HTML first 

<!--Form for collecting image URL -->
			<form id="urlBox" class = "center">
				<input class="url-box" type="url" id="imgUrl" placeholder="Paste any image link and hit enter to start playing.">
			</form>

			<!--Controls for CSS filters via range input-->
			<div class="sliders">
				<form id="imageEditor">
					<p>
						<label for="gs">Grayscale</label>
						<input id="gs" name="gs" type="range" min=0 max=100 value=0>
					</p>

					<p>
						<label for="blur">Blur</label>
						<input id="blur" name="blur" type="range" min=0 max=10 value=0>
					</p>

					<p>
						<label for="br">Brightness</label>
						<input id="br" name="br" type="range" min=0 max=200 value=100>
					</p>

					<p>
						<label for="ct">Contrast</label>
						<input id="ct" name="ct" type="range" min=0 max=200 value=100>
					</p>

					<p>
						<label for="huer">Hue Rotate</label>
						<input id="huer" name="huer" type="range" min=0 max=360 value=0>
					</p>

					<p>
						<label for="opacity">Opacity</label>
						<input id="opacity" name="opacity" type="range" min=0 max=100 value=100>
					</p>

					<p>
						<label for="invert">Invert</label>
						<input id="invert" name="invert" type="range" min=0 max=100 value=0>
					</p>

					<p>
						<label for="saturate">Saturate</label>
						<input id="saturate" name="saturate" type="range" min=0 max=500 value=100>
					</p>

					<p>
						<label for="sepia">Sepia</label>
						<input id="sepia" name="sepia" type="range" min=0 max=100 value=0>
					</p>

					<input type="reset" form="imageEditor" id="reset" value="Reset" />

				</form>
			</div>	

			<!--container where image will be loaded-->
			<div id="imageContainer" class="center">
				<img src="image/puppies.jpg"/>
			</div>
		</div>

CSS:-

/* Styles for  URL box */ 

.url-box {
	display: inline-block;
    margin: 4% auto 2%;
    text-align: center;
    width: 100%;
    height: 3.5rem;
    font-size: 2rem;
    font-weight: 100;
    outline: none;
    border: 2px solid #000;
    box-sizing: border-box;
}

.url-box::-webkit-input-placeholder {
    color: #000;
    opacity: 0.5;
    font-size: 1.5rem;
    font-weight: 100;
    padding-top: 5px;
}

.url-box::-moz-placeholder {
    color: #000;
    opacity: 0.5;
    font-size: 0.7em;
    font-weight: 100;
    padding-top: 5px;
}

/* Styles for image container*/

#imageContainer {
	border: 2px solid #000;
    display: inline-block;
    padding: 5px;
    vertical-align: top;
    margin-left: 1%;
    width: 65.6%;
}

#imageContainer img {
	width: 100%;
}

/* Styles for sliders*/

.sliders {
    width: 30%;
    display: inline-block;
	border: 2px solid #000;
	padding-left: 10px;
}

.sliders p {
	margin: 18px 0;
	vertical-align: middle;

}

.sliders label {
	display: inline-block;
	margin: 10px 0 0 0;
	width: 100px;
	font-size: 1.1rem;
	color: #22313F;
	text-align: left;
	vertical-align: middle;
}

.sliders input {
	position: relative;
	margin: 10px 20px 0 10px;
	vertical-align: middle;
}

input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border-radius: 5px;
    
    /*required for proper track sizing in FF*/
    width: 150px;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 7px;
    background: #ABB7B7;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #4B77BE;
    margin-top: -6px;
    vertical-align: middle;
}
input[type=range]:focus {
    outline: none;
}

input[type=range]:hover {
	cursor: pointer;
}


#reset {
	display: inline-block;
	height: 2.5rem;
	width: 95%;
    background-color: #22A7F0;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    font-size: 1.5rem;
    color: #fff;
    margin: 0 10px 10px 0px;
    border: 2px solid transparent;
}

#reset:hover {
    color: #22A7F0;
    background-color: #fff;
    border: 2px solid #22A7F0;
}




Jquery/Javascript:-

// adding an image via url box
function addImage(e) {
	var imgUrl = $("#imgUrl").val();
	if (imgUrl.length) {
		$("#imageContainer img").attr("src", imgUrl);
	}
	e.preventDefault();
}

//on pressing return, addImage() will be called
$("#urlBox").submit(addImage);


// editing image via css properties
function editImage() {
	var gs = $("#gs").val(); // grayscale
	var blur = $("#blur").val(); // blur
	var br = $("#br").val(); // brightness
	var ct = $("#ct").val(); // contrast
	var huer = $("#huer").val(); //hue-rotate
	var opacity = $("#opacity").val(); //opacity
	var invert = $("#invert").val(); //invert
	var saturate = $("#saturate").val(); //saturate
	var sepia = $("#sepia").val(); //sepia

	$("#imageContainer img").css("filter", 'grayscale(' + gs+
													 '%) blur(' + blur +
													 'px) brightness(' + br +
													 '%) contrast(' + ct +
													 '%) hue-rotate(' + huer +
													 'deg) opacity(' + opacity +
													 '%) invert(' + invert +
													 '%) saturate(' + saturate +
													 '%) sepia(' + sepia + '%)');

	$("#imageContainer img").css("-webkit-filter", 'grayscale(' + gs+
													 '%) blur(' + blur +
													 'px) brightness(' + br +
													 '%) contrast(' + ct +
													 '%) hue-rotate(' + huer +
													 'deg) opacity(' + opacity +
													 '%) invert(' + invert +
													 '%) saturate(' + saturate +
													 '%) sepia(' + sepia + '%)'); 

}

//When sliders change image will be updated via editImage() function
$("input[type=range]").change(editImage).mousemove(editImage);

// Reset sliders back to their original values on press of 'reset'
$('#imageEditor').on('reset', function () {
	setTimeout(function() {
		editImage();
	},0);
});

Source/Credit:-https://github.com/lalwanivikas/image-editor

That's it we are done, check live example here