Hello buddy, I have come up with another exciting and valuable project today. In this project, you will learn to custom range sliders with changing volume icons and range numbers. There are lots of JavaScript Projects I already have created. This project will boost JavaScript skills to more extent.
Range Slider is the section that can be available on the webpage to increase and decrease the value. For example when we have to increase or volume of the computer we have to use a range slider. Range sliders can be any shape and size but the main moto of the range slider is the same.
Let’s take a look at the given preview of our project [Custom Range Slider] which I have given as an image. As you can see on the range slider, there is a range slider in the middle, on the left side of it there is a speaker icon and on the right side, there is a number. Basically, when we slide the range the speaker icon and that number also change according to the value of the range slider.
To see the real demo of this project [Custom Range Slider], all the HTML CSS, and JavaScript code that I have used to create this range slider. I have provided a full video tutorial below.
Custom Range Slider in HTML CSS & JavaScript | Video Tutorial
Don’t worry I have provided all the HTML CSS and JavaScript code that I have used to create this Range Slider. Before getting into the source code file, I would like to explain the given video tutorial of this project [Custom Range Slider] briefly.
As you have seen in the video tutorial of our project [Custom Range Slider]. At first, there was a range slider with the volume on the right side and the range value on the left side. When I slid the range the speaker icon and the number also changed according to the value.
Like when the range was zero then there was a mute volume icon when the value is between 1 to 30 the volume icon is normal when the range value is between 30 to 80, volume icon was little loud shape and when the range slider got a value between 80 to 100 then the volume icon got extremely loud sound. To create this range slider and its UI, I have used HTML and CSS. To change the numeric value and icon, I used some JavaScript code.
I hope now you are able to create this project [Custom Range Slider] by using HTML CSS and JavaScript. If you are feeling difficulty creating this range slider. I have provided all the source codes below.
You May Like This:
Custom Range Slider [Source Codes]
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css - Create a
script.jsfile. The file name must be script and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Border Loading Animation by clicking on the given download button.
First, paste the following codes into your index.html file
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Range Slider in HTML CSS & JavaScript</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
<!-- Unicons CSS -->
<link
rel="stylesheet"
href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"
/>
</head>
<body>
<div class="wrapper">
<i class="uil uil-volume-mute" id="icon"></i>
<input type="range" min="0" step="1" max="100" value="0" />
<span class="slide-value">0</span>
</div>
<script src="script.js"></script>
</body>
</html>
/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #4070f4;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 130px;
margin: 0 15px;
max-width: 600px;
width: 100%;
padding: 0 20px;
border-radius: 25px;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrapper #icon {
font-size: 35px;
color: #333;
width: 70px;
text-align: center;
}
.wrapper input {
max-width: 400px;
width: 100%;
margin: 0 10px;
appearance: none;
height: 18px;
border-radius: 25px;
background-color: #ededed;
box-shadow: 0 0 0 2px #ededed;
overflow: hidden;
cursor: pointer;
}
input::-webkit-slider-thumb {
appearance: none;
height: 18px;
width: 18px;
border-radius: 50%;
border: 2px solid #fff;
background-color: #4070f4;
box-shadow: -208px 0 0 200px #4070f4;
}
.wrapper .slide-value {
font-size: 27px;
font-weight: 500;
color: #333;
width: 70px;
text-align: center;
}
const icon = document.querySelector("#icon"),
range = document.querySelector("input"),
slideValue = document.querySelector(".slide-value");
range.addEventListener("input", () => {
let rangeVal = range.value;
slideValue.innerText = rangeVal;
if (rangeVal > 0) {
icon.classList.replace("uil-volume-mute", "uil-volume-down");
} else {
icon.classList.replace("uil-volume-down", "uil-volume-mute");
}
if (rangeVal > 30) {
icon.classList.replace("uil-volume-down", "uil-volume");
} else {
icon.classList.replace("uil-volume", "uil-volume-down");
}
if (rangeVal > 80) {
icon.classList.replace("uil-volume", "uil-volume-up");
} else {
icon.classList.replace("uil-volume-up", "uil-volume");
}
});
