|
|
| Строка 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>
| |