How to Create a slider in HTML

Posted 2025-02-13 19:01:03

486

Creating a slider in HTML involves using the <input> element with the type attribute set to "range". Here’s a simple example of how to create a basic slider:

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider Example</title>
    <style>
        .slider {
            width: 300px;
        }
    </style>
</head>
<body>
    <h1>Simple Slider</h1>
    <input type="range" min="0" max="100" value="50" class="slider" id="myRange">
    <p>Value: <span id="sliderValue">50</span></p>

    <script>
        const slider = document.getElementById("myRange");
        const output = document.getElementById("sliderValue");

        slider.oninput = function() {
            output.textContent = this.value;
        }
    </script>
</body>
</html>

Explanation:

<input type="range">: This is the HTML element used to create the slider.
min: The minimum value of the slider.
max: The maximum value of the slider.
value: The initial value of the slider.
class="slider": A CSS class for custom styling of the slider.
JavaScript: The script captures the current value of the slider and displays it in a <span> element.

Customization:

Styling: You can further style the slider using CSS to match your design.
Attributes: Modify min, max, and value attributes as needed.

This basic example should help you get started with sliders in HTML.

Please log in to like, share and comment!