smiley range slider in jQuery

Something Like that:
Smiley Range Slider

For that you need to create first html code.

HTML

<div class="range_container">
<img src="http://home2it.com/wp-content/uploads/2018/02/smile-5.png" alt="manage smile" class="slider_smile">
<input type="range" min="1" max="5" value="5" class="slider" id="myRange">
</div>

After that add this CSS code.

CSS

.range_container {
  width: 300px;
  max-width: 90%;
  margin: 0 auto;
  display: block;
}
.range_container .slider_smile {
  width: 100px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  padding-right: 3px;
  background: #333;
  background: -moz-linear-gradient(left, rgba(51, 51, 51, 0) 0%, #333333 93%, rgba(51, 51, 51, 0) 99%, rgba(51, 51, 51, 0) 100%);
  background: -webkit-linear-gradient(left, rgba(51, 51, 51, 0) 0%, #333333 93%, rgba(51, 51, 51, 0) 99%, rgba(51, 51, 51, 0) 100%);
  background: linear-gradient(to right, rgba(51, 51, 51, 0) 0%, #333333 93%, rgba(51, 51, 51, 0) 99%, rgba(51, 51, 51, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00333333', endColorstr='#00333333', GradientType=1);
  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: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0px 0px 8px #999;
  background: #fff;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0px 0px 8px #999;
  background: #fff;
  cursor: pointer;
}

Use jQuery Library.

After that add this JQuery code.

JS

var slider = document.getElementById("myRange");
var output = $('.slider_smile');
//range slider
slider.oninput = function(){
	if(this.value == 1){
		output.attr('src','http://home2it.com/wp-content/uploads/2018/02/smile-1.png');
	} else if(this.value == 2){
		output.attr('src','http://home2it.com/wp-content/uploads/2018/02/smile-2.png'); 
	} else if(this.value == 3){
		output.attr('src','http://home2it.com/wp-content/uploads/2018/02/smile-3.png'); 
	} else if(this.value == 4){
		output.attr('src','http://home2it.com/wp-content/uploads/2018/02/smile-4.png'); 
	} else if(this.value == 5){
		output.attr('src','http://home2it.com/wp-content/uploads/2018/02/smile-5.png'); 
	}
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”MQzBME” default_tab=”css,result” user=”pradeepanvi”]See the Pen smiley range slider in jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]