Custom Animated Range Slider using HTML CSS & JavaScript

Hello readers, Today in this blog you'll learn how to create a Custom Animated Range Slider Using HTML CSS & JavaScript. Earlier I have shared a blog on how to create a Page Screen Preloader using JavaScript. And now I'm going to create a Custom Range Slider.

The range slider offers two handles to set a min and max value with a numeric continuum. Range Sliders are used on web pages to let the user define a numeric value which must be no less than a given value, and no more than another given value. That is, it permits us to choose a value from a range that is represented as a slider.

In this program (Custom Animated Range Slider), on the webpage, there is a white container box and inside this box, there is a range slider. At first, that center tooltip value is hidden but when you slide or change the value of range slider then the center tooltip value is visible and this value is dynamic but the other two values are fixed.

Dynamic value means that value change according to the range value but the left and right side values are fixed and it doesn't change. You can also create a default range slider using HTML5 <input type="range"> but default range slider can't attract the visitors and content viewers towards the website. If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Custom Animated Range Slider).

Video Tutorial of Custom Animated Range Slider

In the video, you have seen how this Range Slider works and I hope you have understood the basic codes behind creating this range slider. Actually, all design is based on only HTML & CSS but I used JavaScript to change the value according to the range value and change the position of the tooltip. Remember that, the range progress background color is only shown on the Firefox browser.

If you like this program (Custom Animated Range Slider) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this program on your projects, websites, and HTML pages.

Custom Animated Range Slider [Source Codes]

To create this program (Custom Animated Range Slider). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>Custom Range Slider | CodingNepal</title> -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="range">
        <div class="sliderValue">
          <span>100</span>
        </div>
<div class="field">
          <div class="value left">
0</div>
<input type="range" min="10" max="200" value="100" steps="1">
          <div class="value right">
200</div>
</div>
</div>
<script>
      const slideValue = document.querySelector("span");
      const inputSlider = document.querySelector("input");
      inputSlider.oninput = (()=>{
        let value = inputSlider.value;
        slideValue.textContent = value;
        slideValue.style.left = (value/2) + "%";
        slideValue.classList.add("show");
      });
      inputSlider.onblur = (()=>{
        slideValue.classList.remove("show");
      });
    </script>

  </body>
</html>

CSS FILE:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  text-align: center;
  place-items: center;
  background: #664AFF;
}
.range{
  height: 80px;
  width: 380px;
  background: #fff;
  border-radius: 10px;
  padding: 0 65px 0 45px;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.1);
}
.sliderValue{
  position: relative;
  width: 100%;
}
.sliderValue span{
  position: absolute;
  height: 45px;
  width: 45px;
  transform: translateX(-70%) scale(0);
  font-weight: 500;
  top: -40px;
  line-height: 55px;
  z-index: 2;
  color: #fff;
  transform-origin: bottom;
  transition: transform 0.3s ease-in-out;
}
.sliderValue span.show{
  transform: translateX(-70%) scale(1);
}
.sliderValue span:after{
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  background: #664AFF;
  border: 3px solid #fff;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-bottom-left-radius: 50%;
  box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}
.field{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}
.field .value{
  position: absolute;
  font-size: 18px;
  color: #664AFF;
  font-weight: 600;
}
.field .value.left{
  left: -22px;
}
.field .value.right{
  right: -43px;
}
.range input{
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  background: #ddd;
  border-radius: 5px;
  outline: none;
  border: none;
  z-index: 2222;
}
.range input::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  background: #664AFF;
  border: 1px solid #664AFF;
  cursor: pointer;
}
.range input::-moz-range-thumb{
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  background: #664AFF;
  border: 1px solid #664AFF;
  cursor: pointer;
}
.range input::-moz-range-progress{
  background: #664AFF; //this progress background is only shown on Firefox
}

Video Tutorial of Custom Animated Range Slider

You might like this:

Custom Animated Range Slider [Source Codes]

Thanks for visiting, Keep visiting.

1 Comments

Post a Comment

About Us

Contact Form