Версия 17:56, 28 февраля 2023

Custom Range Slider

Default range slider:

Drag the slider to display the current value.

Value:

@@ Строка 47: / Строка 47: @@
    <input type="range" min="1" max="100" value="50">
-<p>Custom range slider:</p>
+<h1>Custom Range Slider</h1>
+<p>Drag the slider to display the current value.</p>
+<div class="slidecontainer">
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
+  <p>Value: <span id="demo"></span></p>
 </div>
+<script>
+var slider = document.getElementById("myRange");
+var output = document.getElementById("demo");
+output.innerHTML = slider.value;
+slider.oninput = function() {
+  output.innerHTML = this.value;
+}
+</script>
 </body>
 </html>