Рони, подскажи еще одно)
Как сделать обратное действие? Ввод в инпут значения что бы оно меняло этот ползунок. |
hfts_rider,
только будет корректировка согласно step <!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<style type="text/css">
.range-uah { margin: 10px;width : 500px; height: 8px ;
background-image: -webkit-gradient(linear, left, right, color-stop(0, #FFD700), color-stop(1, #FF4500));
background-image: -o-linear-gradient(left, #FFD700, #FF4500);
background-image: -moz-linear-gradient(left, #FFD700, #FF4500);
background-image: -webkit-linear-gradient(left, #FFD700, #FF4500);
background-image: linear-gradient(to right, #FFD700, #FF4500)
}
.ui-widget-header {
background-image: -webkit-gradient(linear, left, right, color-stop(0, #FF1493), color-stop(1, #0060BF));
background-image: -o-linear-gradient(left, #FF1493, #0060BF);
background-image: -moz-linear-gradient(left, #FF1493, #0060BF);
background-image: -webkit-linear-gradient(left, #FF1493, #0060BF);
background-image: linear-gradient(to right, #FF1493, #0060BF)
}
.ui-slider-handle{border-radius:50%; position: relative; font-size: 14px; display: block; }
.ui-slider-horizontal .ui-slider-handle{top:-0.4em; background: #0000FF; }
.range-uah:focus {
outline: 0; /* Firefox выделяет рамкой из точек все ссылки при нажатии */
border: 0;
}
</style>
</head>
<body>
<div class="slider-range range-uah"></div>
<input class="result-block">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script>
$(function() {
var len = 98 *30;
$( ".range-uah" ).slider({
range: "min",
value: 0,
step: 30,
min: 0,
max: len * 2,
slide: function( event, ui ) {
var res = ui.value;
if (res < len) {
$( ".range-uah" ).slider({step: 30});
$( ".result-block" ).val(1000 + 500*Math.floor(res/30));
} else {
$( ".range-uah" ).slider({step: 98});
$( ".result-block" ).val(50000 + 5000*Math.floor((res-len)/98));
}
},
change: function( event, ui ) {
var res = ui.value;
if (res < len) {
$( ".range-uah" ).slider({step: 30});
$( ".result-block" ).val(1000 + 500*Math.floor(res/30));
} else {
$( ".range-uah" ).slider({step: 98});
$( ".result-block" ).val(50000 + 5000*Math.floor((res-len)/98));
}
}
});
//$( ".range-uah" ).slider("option", "value" , 98 * 30);
$( ".result-block" ).on('change', function() {
var val = +this.value||0;
val = val < 50000 ? Math.floor(30*(val - 1000)/500) : (len + Math.floor(98*(val - 50000)/5000)) ;
$( ".range-uah" ).slider("option", "value" , val);
}).val(50000).change()
});
</script>
</body>
</html>
|
Спасибо!!!!!!
|
Все шикарно, но есть еще одно но))
Как сделать переключение ползунка на лайв режим при вводе? Пробовал изменить событие на "keyup", все вроде бы норм, но есть проблемка.. Когда я начинаю вводить все работает, когда хочу стереть, тоже, но если я ввел допустим "5000" и жму "arrow left", оно перекидывает сразу назад в конец поля... В чем может быть проблема? Я обернул в условия. <!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<style type="text/css">
.range-uah { margin: 10px;width : 500px; height: 8px ;
background-image: -webkit-gradient(linear, left, right, color-stop(0, #FFD700), color-stop(1, #FF4500));
background-image: -o-linear-gradient(left, #FFD700, #FF4500);
background-image: -moz-linear-gradient(left, #FFD700, #FF4500);
background-image: -webkit-linear-gradient(left, #FFD700, #FF4500);
background-image: linear-gradient(to right, #FFD700, #FF4500)
}
.ui-widget-header {
background-image: -webkit-gradient(linear, left, right, color-stop(0, #FF1493), color-stop(1, #0060BF));
background-image: -o-linear-gradient(left, #FF1493, #0060BF);
background-image: -moz-linear-gradient(left, #FF1493, #0060BF);
background-image: -webkit-linear-gradient(left, #FF1493, #0060BF);
background-image: linear-gradient(to right, #FF1493, #0060BF)
}
.ui-slider-handle{border-radius:50%; position: relative; font-size: 14px; display: block; }
.ui-slider-horizontal .ui-slider-handle{top:-0.4em; background: #0000FF; }
.range-uah:focus {
outline: 0; /* Firefox выделяет рамкой из точек все ссылки при нажатии */
border: 0;
}
</style>
</head>
<body>
<div class="slider-range range-uah"></div>
<input class="result-block">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script>
$(function() {
var len = 98 *30;
$( ".range-uah" ).slider({
range: "min",
value: 0,
step: 30,
min: 0,
max: len * 2,
slide: function( event, ui ) {
var res = ui.value;
if (res < len) {
$( ".range-uah" ).slider({step: 30});
$( ".result-block" ).val(1000 + 500*Math.floor(res/30));
} else {
$( ".range-uah" ).slider({step: 98});
$( ".result-block" ).val(50000 + 5000*Math.floor((res-len)/98));
}
},
change: function( event, ui ) {
var res = ui.value;
if (res < len) {
$( ".range-uah" ).slider({step: 30});
$( ".result-block" ).val(1000 + 500*Math.floor(res/30));
} else {
$( ".range-uah" ).slider({step: 98});
$( ".result-block" ).val(50000 + 5000*Math.floor((res-len)/98));
}
}
});
$( ".range-uah" ).slider("option", "value" , 98 * 30);
$( ".result-block" ).on('keyup', function() {
var val = +this.value||0;
if (val >= 1000 && val <= 200000) {
val = val < 50000 ? Math.floor(30*(val - 1000)/500) : (len + Math.floor(98*(val - 50000)/5000)) ;
$( ".range-uah" ).slider("option", "value" , val);
}
});
});
</script>
</body>
</html>
|
Я наверное понял.. Это событие "keyup" срабатывает и выводит значение..
|
Как же его можно переделать?... Я так понял что сейчас когда я ввожу значение оно меняет его на ползунке и при этом же вбивает повторно значение в поле инпут, по этому когда я жму в поле на стрелку после срабатывания события "keyup" оно повторно пересчитывает и выдает значение в поле..
Оно друг с другом связанно так что непонятно как его переделать.. Друг другу действия мешают.. |
hfts_rider,
в живую то как ? посетитель уже закончил или ещё будет вносить изменения -- может только таймер - в начале функции его обнулять в конце функции ставить второй вариант - кнопка ок |
| Часовой пояс GMT +3, время: 07:43. |