Range Slider

index.html

<div class="main">
  <div class="slideContainer">
    <label>Value: <span id="value"></span></label>
        <input type="range" min="0" max="100" value="1"   class="slider" id="myRange">
    </div>
</div>

range-slider.markdown

Range Slider

Basic Range slider with dynamic value display and color fill.

A Pen by Amar Shetty on CodePen.

License.

script.js

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

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}


slider.addEventListener("mousemove", function() {
    console.log("hallo");
    var x = slider.value;
    var color = 'linear-gradient(90deg, rgb(117, 252, 117)' + x + '% , rgb(214, 214, 214)' + x + '%)';
    slider.style.background = color;
});

style.less

.main {
  width: 800px;
}
label {
  width:18%;
  color: #0096d6;
  vertical-align:middle;
  display: inline-block;
}
p {
	margin-top: 50px;
	opacity: 0.7;
}

.slideContainer {
	width: 55%;
	margin-top: 200px;
  }
  
  .slider {
	-webkit-appearance: none;
	width: 150px;
	height: 5px;
	background: linear-gradient(90deg, rgb(117, 252, 117) 5%, rgb(214, 214, 214) 0%);
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
	border-radius: 12px;
	box-shadow: 0px 1px 10px 1px black;
	}
	
.slider::after {
		content:"100";
		color: white;
		font-size: 2rem;
		position: absolute;
		left: 80%;
		top: 26%;
	}

.slider::before {
		content:"0";
		color: white;
		font-size: 2rem;
		position: absolute;
		left: 12%;
		top: 26%;
	}
  
  .slider:hover {
	opacity: 1;
  }
  
  .slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	background: white;
	cursor: pointer;
	border-radius: 50%;
  }
  
  .slider::-moz-range-thumb {
	width: 40px;
	height: 40px;
	background: white;
	cursor: pointer;
	border-radius: 50%;
  }