Здравствуйте, есть ползунок диапазона цены. Выглядит вот так
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 1000,
values: [ 0, 300 ],
step: 10,
slide: function( event, ui ) {
$( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#price" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<input class="form-control" name="price" id="price">
<div id="slider-range"></div>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
crossorigin="anonymous"></script>
Как сделать, чтобы цена отображалась вот так
Можно как-то так, но пример еще сыроват. К примеру у правой цены я сразу задал в стилях margin-left: 30%;
, по хорошему в JS нужно его выставить как в обрабочике slide
. Ну и при перекрывании левой и правой границ друг другом тоже сделать обработку условия, чтобы друг на друга не налазили. А так, пример вполне себе приемлемый для понимания и использования.
$("#slider-range").slider({
range: true,
min: 0,
max: 1000,
values: [0, 300],
step: 10,
slide: function(event, ui) {
$("#rub-left").text(ui.values[0] + 'р.'); // текст левого span
$("#rub-right").text(ui.values[1] + 'р.'); // текст правого span
if (ui.handleIndex === 0) {
// потянули левый ползунок - переместим левый span
$("#rub-left").css('margin-left', ui.handle.style.left);
} else {
// потянули правый ползунок - переместим правый span
$("#rub-right").css('margin-left', ui.handle.style.left);
}
}
});
// задать начальный текст левого span
$("#rub-left").text($("#slider-range").slider("values", 0) + 'р.');
// задать начальный текст правого span
$("#rub-right").text($("#slider-range").slider("values", 1) + 'р.');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<div id="slider-range"></div>
<div>
<span id="rub-left" style="position: absolute;"></span>
<span id="rub-right" style="position: absolute; margin-left: 30%;"></span>
</div>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Данный код создает thumbnail 150x100 изображения к примеру с размером 500х1000 он берет центр и режет на 150 высотуКак создать thumbnail с адаптивным высотой...
У меня есть некий скрипт на python, который служит лаунчером для запуска фриды (https://fridare/docs/functions/)
Никак не могу понять, как именно конвертировать ответ, получаемый из функции get_full_info()