Creating A Range Slider in HTML using JavaScript

Last Updated : 26 Jun, 2024

Range Sliders are used on web pages to allow the user specify a numeric value which must be no less than a given value, and no more than another given value. That is, it allows one to choose the value from a range which is represented as a slider. A Range slider is typically represented using a slider or dial control rather than a text entry box like the "number" input type. It is used when the exact numeric value isn't required to input. For example, the price slider in the filter menu of products list at flipkart.com.

Approach

Create a simple web page featuring a styled range slider.
Include inline CSS to enhance the slider's appearance with a rounded track and a circular thumb that changes color when hovered over.
Set the range slider with a minimum value of 1, a maximum value of 100, and a default value of 10.
Embed the range slider within a div for better layout control.
Add a JavaScript script to dynamically update a displayed value as the slider is adjusted.
Retrieve the slider element by its ID and set its value to a span element, which is updated in real-time whenever the slider's position changes.
Center the overall design and ensure it is color-coordinated to create a user-friendly interface.

Example: This example shows the implementation of the above-explained approach.

html

<!DOCTYPE html>
<html>

<head>
    <style>
        .rangeslider {
            width: 50%;
            margin: auto;
            text-align: center;
        }

        .myslider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 20px;
            background: #e0e0e0;
            outline: none;
            opacity: 0.7;
            transition: opacity .15s ease-in-out;
            border-radius: 10px;
        }

        .myslider:hover {
            opacity: 1;
        }

        .myslider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 25px;
            height: 25px;
            background: #4CAF50;
            cursor: pointer;
            border-radius: 50%;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            transition: background .3s ease-in-out;
        }

        .myslider::-moz-range-thumb {
            width: 25px;
            height: 25px;
            background: #4CAF50;
            cursor: pointer;
            border-radius: 50%;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            transition: background .3s ease-in-out;
        }

        .myslider::-webkit-slider-thumb:hover {
            background: #45a049;
        }

        .myslider::-moz-range-thumb:hover {
            background: #45a049;
        }

        h1 {
            text-align: center;
            color: #34495E;
        }

        p {
            text-align: center;
            font-size: 18px;
            color: #34495E;
        }

        #demo {
            font-weight: bold;
            color: #4CAF50;
        }
    </style>
</head>

<body>

    <h1>Example of Range Slider Using Javascript</h1>
    <p>Use the slider to increment or decrement value.</p>

    <div class="rangeslider">
        <input type="range" min="1" max="100" 
               value="10" class="myslider" 
               id="sliderRange">
        <p>Value: <span id="demo"></span></p>
    </div>

    <script>
        let rangeslider = document.getElementById("sliderRange");
        let output = document.getElementById("demo");
        output.innerHTML = rangeslider.value;

        rangeslider.oninput = function () {
            output.innerHTML = this.value;
        }
    </script>

</body>

</html>