Temp4 — различия между версиями
Материал из Н.Ф. Федоров
Petrov (обсуждение | вклад) |
Petrov (обсуждение | вклад) |
||
| (не показано 10 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
| − | < | + | <html> |
| + | <head> | ||
| + | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| + | <style> | ||
| + | .slidecontainer { | ||
| + | width: 100%; | ||
| + | } | ||
| + | .slider { | ||
| + | -webkit-appearance: yes; | ||
| + | width: 100%; | ||
| + | height: 25px; | ||
| + | background: red; | ||
| + | outline: none; | ||
| + | opacity: 0.7; | ||
| + | -webkit-transition: .2s; | ||
| + | transition: opacity .2s; | ||
| + | } | ||
| − | {{ | + | .slider:hover { |
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | .slider::-webkit-slider-thumb { | ||
| + | -webkit-appearance: none; | ||
| + | appearance: none; | ||
| + | width: 25px; | ||
| + | height: 25px; | ||
| + | background: #4CAF50; | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | |||
| + | .slider::-moz-range-thumb { | ||
| + | width: 25px; | ||
| + | height: 25px; | ||
| + | background: #4CAF50; | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | </style> | ||
| + | </head> | ||
| + | <body> | ||
| + | |||
| + | |||
| + | <div class="slidecontainer"> | ||
| + | <p>Default range slider:</p> | ||
| + | <input type="range" min="1" max="100" value="50"> | ||
| + | |||
| + | <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> | ||
| + | |||
| + | <?php | ||
| + | print_r('Hello, WWV.'); // Hello, World.?> | ||
| + | |||
| + | </body> | ||
| + | |||
| + | </html> | ||
Текущая версия на 19:04, 1 марта 2023