Custom Emoji Range Slider using HTML CSS & JavaScript

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.

If you like this program and want to get source files or codes of this program then you can easily download the source files from the download link. You can customize the codes of this program and use it on your project without any limitations.

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.

Note: If you copy the codes and paste them into your files then you won't get the images of this program. So download the source files of this program from the below download button and get all files, images that are used in this program. alert-info

HTML CODE:

<!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>

CSS CODE:

@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);
}

Download code files

1 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Shaheer AsifDecember 15, 2020 at 12:16 AM
Can you please make a contact form with my email adress so when people want to email me they can use the form
My Email : Shaheera875875@gmail.com

Thanks

Video Tutorial of Custom Emoji Range Slider

You might like this:

Custom Emoji Range Slider [Source Codes]

1 Comments

Post a Comment

About Us

Contact Form