Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="slider-container" data-min="69" data-max="199"></div> <input id="amount">
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#slider-container, #amount { margin: 1em 10%; }
CSS
Autoformát
CSS reset
Až na konci
(function() { var el = $('#slider-container'); var min = el.data("min"); var max = el.data("max"); var setAmount = function(low, high) { $("#amount").val("$" + low + " - $" + high); }; el.slider({ range: true, min: min, max: max, values: [min, max], create: function() { setAmount(min, max); }, slide: function(event, ui) { setAmount(ui.values[0], ui.values[1]); } }); })();
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>