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
<html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" </head> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <span id="slider-range-min-label"><span class="value"></span> Kč</span> <div id="slider-range-price" data-min="20" data-max="20000" data-value-min="500" data-value-max="8000"></div> <span id="slider-range-max-label"><span class="value"></span> Kč</span> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#slider-range-price { width: 60%; margin-top: 3px; float: left; } #slider-range-price .ui-widget-header { background: #183a6e; } #slider-range-price .ui-state-default, #slider-range-price .ui-widget-content .ui-state-default, #slider-range-price .ui-widget-header .ui-state-default, #slider-range-price .ui-state-active, #slider-range-price .ui-state-hover { border: 1px solid white; background: #2f7cf0; } .ui-slider-handle { background: #e5e5e5; border: 1px solid #cbcbcb; border-radius: 3px; } .ui-slider { border: 1px solid #e5e5e5; border-radius: 3px; } #slider-range-min-label { float: left; width: 5.2em; font-size: 0.9em; font-weight: bold; } #slider-range-max-label { float: left; min-width: 5.2em; text-align: right; font-size: 0.9em; font-weight: bold; }
CSS
Autoformát
CSS reset
Až na konci
$(function() { if (!$( "#slider-range-price" ).length) return; $( "#slider-range-price" ).slider({ range: true, min: $( "#slider-range-price" ).data('min'), max: $( "#slider-range-price" ).data('max'), values: [$( "#slider-range-price" ).data('value-min'), $( "#slider-range-price" ).data('value-max')], slide: function( event, ui ) { $( "#slider-range-min-label .value" ).text(ui.values[ 0 ]); $( "#slider-range-max-label .value" ).text(ui.values[ 1 ]); } }); $( "#slider-range-min-label .value" ).text( $( "#slider-range-price" ).slider( "values", 0 )); $( "#slider-range-max-label .value" ).text( $( "#slider-range-price" ).slider( "values", 1 )); }); $(function() { $(".jquery-range").each(function() { var obj = $(this); obj.slider({ range: true, min: obj.data('min'), max: obj.data('max'), values: [obj.data('value-min'), obj.data('value-max'),], slide: function( event, ui ) { $(obj).closest(".JS_range_container").children(".JS_min_input").val(ui.values[ 0 ]); $(obj).closest(".JS_range_container").children(".JS_max_input").val(ui.values[ 1 ]); } }); $(obj).closest(".JS_range_container").children(".JS_min_input").val( $(obj).slider( "values", 0 )); $(obj).closest(".JS_range_container").children(".JS_max_input").val( $(obj).slider( "values", 1 )); }); })
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>