Hello readers, Today in this blog you’ll learn how to create Custom Emoji Range Slider Using HTML CSS & JavaScript. Earlier I have shared a blog on how to create Custom Range Slider in JavaScript and now I’m going to create a Mood Range Slider or Emoji Range Slider.
The JavaScript Range Slider is a custom range-type HTML5 input control. It lets you select a value or range of values between a particularized min and max. In this program [Custom Emoji Range Slider], on the webpage, there is a white content box with an emoji and a custom range slider.
When you slide the range slider or increase the range value, the emoji also slide and change according to the range value. The more range value shows the more happy emoji. You can watch a full video tutorial on this program [Emoji Range Slider].
Video Tutorial of Custom Emoji Range Slider
In the video, you have seen the custom mood slider or range slider which is created using HTML CSS & JavaScript. And I hope you have understood the basic codes behind creating this slider. If you have basic knowledge of JavaScript then you can also create this type of custom range slider and use it on your website, projects according to your requirement.
You might like this:
Custom Emoji Range Slider [Source Codes]
To create this program [Custom Emoji Range Slider]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files from the below download button.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this emoji slider won’t appear. You’ve to download files from the given download button to use images also.
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emoji Range Slider | CodingNepal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="section">
<ul class="emojis">
<li class="slide-emoji"><img src="emojis/emoji-1.png" alt=""></li>
<li><img src="emojis/emoji-2.png" alt=""></li>
<li><img src="emojis/emoji-4.png" alt=""></li>
<li><img src="emojis/emoji-4.png" alt=""></li>
<li><img src="emojis/emoji-5.png" alt=""></li>
</ul>
</div>
<div class="slider">
<div class="thumb"><span></span></div>
<div class="progress-bar"></div>
<input type="range" min="0" value="0" max="100">
</div>
</div>
<script>
const body = document.querySelector("body");
const emoji = document.querySelector(".slide-emoji");
const input = document.querySelector("input");
const bar = document.querySelector(".progress-bar");
const thumb = document.querySelector(".thumb");
input.oninput = ()=>{
let sliderValue = input.value;
thumb.style.left = sliderValue + '%';
bar.style.width = sliderValue + '%';
if(sliderValue < 20){
emoji.style.marginTop = "0px";
body.classList.add("angry");
body.classList.remove("confuse");
body.classList.remove("like");
}
if(sliderValue >= 20){
emoji.style.marginTop = "-140px";
body.classList.add("confuse");
body.classList.remove("angry");
body.classList.remove("like");
}
if(sliderValue >= 40){
emoji.style.marginTop = "-280px";
}
if(sliderValue >= 60){
emoji.style.marginTop = "-420px";
body.classList.add("like");
body.classList.remove("confuse");
body.classList.remove("angry");
}
if(sliderValue >= 80){
emoji.style.marginTop = "-560px";
}
}
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(#FD8D58, #DC611E);
padding: 20px;
transition: all 0.3s ease;
}
body.angry{
background: linear-gradient(#FD8D58, #DC611E);
}
body.confuse{
background: linear-gradient(#FEA954, #DA7315);
}
body.like{
background: linear-gradient(#FED151, #DE981F);
}
.wrapper{
background: #f6f6f6;
padding: 30px 40px 40px;
border-radius: 10px;
max-width: 350px;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper .section{
height: 140px;
width: 140px;
overflow: hidden;
}
.wrapper .section .emojis{
height: 500%;
display: flex;
flex-direction: column;
}
.wrapper .section li{
height: 20%;
width: 100%;
list-style: none;
transition: all 0.3s ease;
}
.section li img{
height: 100%;
width: 100%;
}
.wrapper .slider{
margin-top: 40px;
height: 12px;
width: 100%;
position: relative;
background: #d9d9d9;
border-radius: 50px;
}
.slider input{
height: 100%;
width: 100%;
-webkit-appearance: none;
position: absolute;
background: none;
outline: none;
top: 0;
z-index: 2;
}
.slider input::-webkit-slider-thumb{
-webkit-appearance: none;
height: 20px;
width: 20px;
background: none;
cursor: pointer;
}
.slider .progress-bar{
height: 100%;
width: 0%;
background: linear-gradient(45deg,#FD8D58, #DC611E);
border-radius: 50px;
position: relative;
}
body.angry .progress-bar{
background: linear-gradient(45deg,#FD8D58, #DC611E);
}
body.confuse .progress-bar{
background: linear-gradient(45deg,#FEA954, #DA7315);
}
body.like .progress-bar{
background: linear-gradient(45deg,#FED151, #DE981F);
}
.slider .thumb{
height: 25px;
width: 25px;
background: #DC611E;
border-radius: 50%;
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
z-index: 1;
padding: 2px;
}
body.angry .thumb{
background: #DC611E;
}
body.confuse .thumb{
background: #DA7315;
}
body.like .thumb{
background: #DE981F;
}
.slider .thumb span{
height: 100%;
width: 100%;
border: 2px solid #f6f6f6;
border-radius: 50%;
background: linear-gradient(#FD8D58, #DC611E);
display: block;
}
body.angry .thumb span{
background: linear-gradient(#FD8D58, #DC611E);
}
body.confuse .thumb span{
background: linear-gradient(#FEA954, #DA7315);
}
body.like .thumb span{
background: linear-gradient(#FED151, #DE981F);
}
That’s all, now you’ve successfully created a Custom Emoji Range Slider Using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
