Animated Range Slider using HTML CSS & JavaScript

Welcome to our tutorial on how to create a range slider using HTML and CSS! Range sliders are a fantastic way to allow users to select a value from a specified range. In this guide, you’ll learn how to build a sleek and functional range slider using HTML CSS that enhances your web design.

Throughout this tutorial, you’ll discover how to create a range slider using HTML CSS step by step:

Setting up the HTML Structure: Learn how to structure your HTML to create a basic range slider using HTML CSS that forms the foundation of our interactive element.
Styling with CSS: Explore various CSS techniques to style your range slider, making it visually appealing and ensuring it fits seamlessly into your website’s design. A well-styled range slider using HTML CSS will improve the user experience significantly.
Enhancing with JavaScript: While this tutorial focuses on creating a range slider using HTML CSS, we’ll also touch on how to enhance it further with JavaScript for added interactivity and functionality.

By the end of this tutorial, you’ll be able to create a range slider using HTML CSS that is both functional and visually appealing.

Animated Range Slider using HTML CSS & JavaScript

If you want to make an Animated Range Slider using HTML CSS & JavaScript, then you have to follow the steps which are given below. Using these steps, you can easily create the Range Slider.

Step 1: 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.

HTML CODE:

<!DOCTYPE html>
<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 Using html css and javascript | Codebari</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="range_wrap">
        <div class="range_box">
            <div class="range_slider">
                <span class="range_value">0</span>
                <input type="range" min="0" max="200" value="0" id="range_line">
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

Step 2: Now, 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.

CSS CODE:

/* Range Slider */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.range_wrap{
    background-color: #ff6122;
    display: flex;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    width: 100%;
    height: 100vh;
    padding: 50px;
}
.range_box{
    background: rgb(0 116 116 / 7%);
    padding: 70px;
    border-radius: 5px;
    text-align: center;
}

/* Range Slider */
.range_slider{
    position: relative;
    width: 450px;
    margin: auto;
}
#range_line{
    -webkit-appearance: none;
    height: 40px;
    border-radius: 50px;
    width: 100%;
    overflow: hidden;
    margin-top: 5px;
}
#range_line::-webkit-slider-runnable-track{
    width: 100%;
    height: 40px;
    cursor: pointer;
    box-shadow: none;
    background-color: #fff;
    border-radius: 50px;
    border: none;
}
#range_line::-moz-range-track{
    width: 100%;
    height: 40px;
    cursor: pointer;
    box-shadow: none;
    background-color: #fff;
    border-radius: 50px;
    border: none;
}
#range_line::-webkit-slider-thumb{
    -webkit-appearance: none;
    background-color: #3F51B5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: none;
    border: none;
}
#range_line::-moz-range-thumb{
    -webkit-appearance: none;
    background-color: #3F51B5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: none;
    border: none;
}
.range_value{
    position: absolute;
    width: 50px;
    height: 50px;
    top:-65px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #3F51B5;
    z-index: 1;
}
.range_value:after{
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 50px 50px 0px;
    z-index: -1;
}

Step 3: Now, create a JS file with the name of app.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.

JS CODE:

//Range Slider
var rangeSlider = document.querySelector("#range_line");
var rangeValue= document.querySelector(".range_value");

rangeSlider.addEventListener("input", showRangeValue, false);

function showRangeValue(){
    rangeValue.innerHTML = rangeSlider.value;
    var valuePosition = (rangeSlider.value/rangeSlider.max);
    rangeValue.style.left= (valuePosition * 410) + "px";
}