canvas {
	position: absolute;
	border: 1px solid gray;

	/*horizontal, vertical center*/
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.slidecontainer {
	/* Width of the outside container */
	width: 100%;
}

/* The slider itself */
.slider {
	/* Override default CSS styles */
	-webkit-appearance: none;
	appearance: none;
	/* Full-width */
	width: 100%;
	/* Specified height */
	height: 25px;
	/* Grey background */
	background: #d3d3d3;
	/* Remove outline */
	outline: none;
	/* Set transparency (for mouse-over effects on hover) */
	opacity: 0.7;
	/* 0.2 seconds transition on hover */
	-webkit-transition: .2s;
	transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
	/* Fully shown on mouse-over */
	opacity: 1;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
	/* Override default look */
	-webkit-appearance: none;
	appearance: none;
	/* Set a specific slider handle width */
	width: 25px;
	/* Slider handle height */
	height: 25px;
	/* Green background */
	background: #04AA6D;
	/* Cursor on hover */
	cursor: pointer;
}

.slider::-moz-range-thumb {
	/* Set a specific slider handle width */
	width: 25px;
	/* Slider handle height */
	height: 25px;
	/* Green background */
	background: #04AA6D;
	/* Cursor on hover */
	cursor: pointer;
}