range slider

by mmalex

HTML

<div class="slidecontainer">
  <div id="sliderplay"></div>
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <div id="sliderprogress"></div>
</div>

CSS

#sliderplay {
    float: left;
	margin-left: 4px;
	margin-top: 2px;
	margin-right: 8px;
    width: 25px;
    height: 25px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(https://image.flaticon.com/icons/svg/26/26025.svg);
}
#sliderprogress {
	position: relative;
	top: 10px;
	left: 39px;
	width: 75px;
	height: 9px;
	background-color: #d91010;
	z-index: 1;
}
.play:hover {
	cursor: pointer;
}
.slidecontainer {
    width: 200px;
	height: 30px;
	background-color: darkgray;
}

/* The slider itself */
.slider {
	float:left;
	margin-top: 10px;
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 150px; /* Full-width */
    height: 9px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 1; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
	z-index: 2;
}

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

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 14px; /* Set a specific slider handle width */
    height: 20px; /* Slider handle height */
    background: #e92020; /* Green background */
    cursor: pointer; /* Cursor on hover */
	border-radius: 2px;
	position: relative;
	z-index: 3;
}

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

JavaScript

var slider = document.getElementById("myRange");

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
	var width = document.getElementById("myRange").offsetWidth;
	document.getElementById("sliderprogress").style.width = (width * this.value / 100.0) + "px" ;
    // output.innerHTML = this.value;
}