HTML Range Input Wert anzeigen

Question

Wie kann ich den Wert eines Slider in HTML anzeigen sobald ich ihn ändere?

<input type="range" min="0" max="100" value="50" id="slider">

Answer 1

Mit Javascript kannst du den Wert dynamisch anzeigen.

<input type="range" min="0" max="100" value="50" class="slider" id="slider">
<p>Wert: <span id="sliderValue">50</span></p>

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

    slider.addEventListener('input', function() {
        output.textContent = slider.value;
    });
</script>