Temp4 — различия между версиями

Материал из Н.Ф. Федоров
Перейти к: навигация, поиск
 
(не показано 8 промежуточных версий этого же участника)
Строка 8: Строка 8:
  
 
.slider {
 
.slider {
     -webkit-appearance: none;
+
     -webkit-appearance: yes;
 
     width: 100%;
 
     width: 100%;
 
     height: 25px;
 
     height: 25px;
     background: #d3d3d3;
+
     background: red;
 
     outline: none;
 
     outline: none;
 
     opacity: 0.7;
 
     opacity: 0.7;
Строка 41: Строка 41:
 
<body>
 
<body>
  
<h1>Custom Range Slider</h1>
 
  
 
<div class="slidecontainer">
 
<div class="slidecontainer">
Строка 47: Строка 46:
 
   <input type="range" min="1" max="100" value="50">
 
   <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">
 
   <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>-->
+
  <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>
 +
 
 +
<?php
 +
print_r('Hello, WWV.'); // Hello, World.?>
  
 
</body>
 
</body>
 +
 
</html>
 
</html>

Текущая версия на 19:04, 1 марта 2023

Default range slider:

Custom Range Slider

Drag the slider to display the current value.

Value: