SHOW:
|
|
- or go back to the newest paste.
| 1 | <!DOCTYPE html> | |
| 2 | <html> | |
| 3 | <head> | |
| 4 | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| 5 | <style> | |
| 6 | .slidecontainer {
| |
| 7 | width: 100%; | |
| 8 | } | |
| 9 | ||
| 10 | .slider {
| |
| 11 | -webkit-appearance: none; | |
| 12 | width: 100%; | |
| 13 | height: 25px; | |
| 14 | background: #d3d3d3; | |
| 15 | outline: none; | |
| 16 | opacity: 0.7; | |
| 17 | -webkit-transition: .2s; | |
| 18 | transition: opacity .2s; | |
| 19 | } | |
| 20 | ||
| 21 | .slider:hover {
| |
| 22 | opacity: 1; | |
| 23 | } | |
| 24 | ||
| 25 | .slider::-webkit-slider-thumb {
| |
| 26 | -webkit-appearance: none; | |
| 27 | appearance: none; | |
| 28 | width: 25px; | |
| 29 | height: 25px; | |
| 30 | background: #4CAF50; | |
| 31 | cursor: pointer; | |
| 32 | } | |
| 33 | ||
| 34 | .slider::-moz-range-thumb {
| |
| 35 | width: 25px; | |
| 36 | height: 25px; | |
| 37 | background: #4CAF50; | |
| 38 | cursor: pointer; | |
| 39 | } | |
| 40 | </style> | |
| 41 | </head> | |
| 42 | <body> | |
| 43 | ||
| 44 | <h1>Custom Range Slider</h1> | |
| 45 | <p>Drag the slider to display the current value.</p> | |
| 46 | ||
| 47 | <div class="slidecontainer"> | |
| 48 | - | Kívánt mennyiség <input type="range" min="1" max="100" value="70" class="slider" id="wantedQuantity"> |
| 48 | + | Kívánt mennyiség <input type="range" min="1" max="500" value="100" class="slider" id="wantedQuantity"> |
| 49 | <p><span id="wantedQuantity_feedback"></span></p> | |
| 50 | Kívánt VG/PG arány <input type="range" min="1" max="100" value="70" class="slider" id="wantedpgvg"> | |
| 51 | <p><span id="wantedpgvg_feedback"></span></p> | |
| 52 | ||
| 53 | Alap VG/PG arány <input type="range" min="1" max="100" value="70" class="slider" id="basepgvg"> | |
| 54 | <p><span id="basepgvg_feedback"></span></p> | |
| 55 | ||
| 56 | Eredmények: | |
| 57 | <p>PG mennyisége: <span id="pg"></span></p> | |
| 58 | <p>VG mennyisége: <span id="vg"></span></p> | |
| 59 | <p>Alap mennyisége: <span id="vg"></span></p> | |
| 60 | <p>Aroma mennyisége: <span id="vg"></span></p> | |
| 61 | </div> | |
| 62 | ||
| 63 | <script> | |
| 64 | var slider_basepgvg = document.getElementById("basepgvg");
| |
| 65 | var output_basepgvg = document.getElementById("basepgvg_feedback");
| |
| 66 | output_basepgvg.innerHTML = slider_basepgvg.value.concat("VG/",100-slider_basepgvg.value,"PG");
| |
| 67 | ||
| 68 | slider_basepgvg.oninput = function() {
| |
| 69 | output_basepgvg.innerHTML = this.value.concat("VG/",100-this.value,"PG");
| |
| 70 | } | |
| 71 | - | output_wantedQuantity.innerHTML = slider_basepgvg.value.concat("ml");
|
| 71 | + | |
| 72 | var slider_wantedQuantity = document.getElementById("wantedQuantity");
| |
| 73 | var output_wantedQuantity = document.getElementById("wantedQuantity_feedback");
| |
| 74 | output_wantedQuantity.innerHTML = slider_wantedQuantity.value.concat("ml");
| |
| 75 | ||
| 76 | slider_wantedQuantity.oninput = function() {
| |
| 77 | output_wantedQuantity.innerHTML = this.value.concat("ml");
| |
| 78 | } | |
| 79 | ||
| 80 | var slider_wantedpgvg = document.getElementById("wantedpgvg");
| |
| 81 | var output_wantedpgvg = document.getElementById("wantedpgvg_feedback");
| |
| 82 | output_wantedpgvg.innerHTML = slider_wantedpgvg.value.concat("VG/",100-slider_wantedpgvg.value,"PG");
| |
| 83 | ||
| 84 | slider_wantedpgvg.oninput = function() {
| |
| 85 | output_wantedpgvg.innerHTML = this.value.concat("VG/",100-this.value,"PG");
| |
| 86 | } | |
| 87 | ||
| 88 | </script> | |
| 89 | ||
| 90 | </body> | |
| 91 | </html> |
