как сделать, чтобы каждый инпут был над своим ползунком и перемещался вместе с ним?
$("#slider-range").slider({
range: true,
min: 0,
max: 3000,
values: [75, 2500],
slide: function(event, ui) {
$("#min").val(ui.values[0] + " руб.");
$("#max").val(ui.values[1] + " руб.");
}
});
$("#min").val($("#slider-range").slider("values", 0) + " руб.");
$("#max").val($("#slider-range").slider("values", 1) + " руб.");
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
<div id="slider-range"></div>
<input type="text" id="min" readonly>
<input type="text" id="max" readonly>
Для этого необходимо в функции slide(event, ui)
изменять стили инпутов в зависимости от того что тянется, например изменять отступ в зависимости от положения слайдера.
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 3000,
values: [ 75, 2500 ],
slide: function( event, ui ) {
$( "#min" ).val(ui.values[ 0 ] + " руб.");
$( "#max" ).val( ui.values[ 1 ] + " руб." );
// set style based on touched rangeslider handle
if (ui.values.indexOf(ui.value) === 0) {
$( "#min" ).css({
'left': ui.handle.style.left,
'z-index': 1,
});
$( "#max" ).css({
'z-index': 0,
});
}
if (ui.values.indexOf(ui.value) === 1) {
$( "#max" ).css({
'left': ui.handle.style.left,
'z-index': 0,
});
$( "#min" ).css({
'z-index': 0,
});
}
},
stop: function( event, ui ) {
$( "#min" ).val(ui.values[ 0 ] + " руб.");
$( "#max" ).val( ui.values[ 1 ] + " руб." );
// set style based on touched rangeslider handle
if (ui.values.indexOf(ui.value) === 0) {
$( "#min" ).css({
'left': ui.handle.style.left,
'z-index': 1,
});
$( "#max" ).css({
'z-index': 0,
});
}
if (ui.values.indexOf(ui.value) === 1) {
$( "#max" ).css({
'left': ui.handle.style.left,
'z-index': 0,
});
$( "#min" ).css({
'z-index': 0,
});
}
}
});
$( "#min" ).val($( "#slider-range" ).slider( "values", 0 ) + " руб.");
$( "#max" ).val($( "#slider-range" ).slider( "values", 1 ) + " руб.");
#min, #max {
position: absolute;
display: block;
}
#min {
left: 4%;
}
#max {
left: 82.5%
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
<div id="slider-range"></div>
<input type="text" id="min" readonly >
<input type="text" id="max" readonly >
есть сервер mysql 56 с таблицами innodb, есть таблица с полнотекстовым индексом и обемом 1гб
так немного предыстории: Работал сайт, с него снят бекапНа бекапе были произведены доработки и настройки
На linux mint 183 установлен MySQL Workbench, все работало нормально, но внезапно перестал загружаться