scinetic/slider

## slider
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    font-family: Arial, Helvetica, sans-serif;
}

.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 35px;
    height: 35px;
    border: 0;
    background: url('https://image.flaticon.com/icons/svg/58/58272.svg');
    background-size: 35px 35px;
}
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 23px;
    height: 24px;
    border: 0;
    background: url('contrasticon.png');
    cursor: pointer;
}
</style>
</head>
<body>

<h1>Slider for adjusting lights</h1>

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Brightness: <span id="demo"></span>%</p>
</div>

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {
	font-family: Arial, Helvetica, sans-serif;
	}

	.slidecontainer {
	width: 100%;
	}

	.slider {
	-webkit-appearance: none;
	width: 100%;
	height: 10px;
	border-radius: 5px;
	background: #d3d3d3;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
	}

	.slider:hover {
	opacity: 1;
	}

	.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 35px;
	height: 35px;
	border: 0;
	background: url('https://image.flaticon.com/icons/svg/58/58272.svg');
	background-size: 35px 35px;
	}
	cursor: pointer;
	}

	.slider::-moz-range-thumb {
	width: 23px;
	height: 24px;
	border: 0;
	background: url('contrasticon.png');
	cursor: pointer;
	}
	</style>
	</head>
	<body>

	<h1>Slider for adjusting lights</h1>

	<div class="slidecontainer">
	<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
	<p>Brightness: <span id="demo"></span>%</p>
	</div>

	<script>
	var slider = document.getElementById("myRange");
	var output = document.getElementById("demo");
	output.innerHTML = slider.value;

	slider.oninput = function() {
	output.innerHTML = this.value;
	}
	</script>

	</body>
	</html>