Изменение value ползунка исходя из значения input
Добрый день, столкнулся с небольшой проблемкой, которую с моими знаниями не решить.
В общем есть слайдер: <input type="text" id="amount"> <div id="slider-zaim"></div>
$( "#slider-zaim" ).slider({
range: "min",
min: 100,
value: 100,
max: 10000,
step: 100,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + " руб." );
}
});
$( "#amount" ).val( $( "#slider-zaim" ).slider( "value" ) + " руб." );
Так вот, при изменении положения ползунка значение в инпуте меняется, но если меня значение в инпуте, то ползунок стоит как вкопанный. Нужно как я понял изменять значения value у ползунка при изменении в инпуте, но как не понял. Перерыл кучу страниц полезной информации, но никак применить ее не смог. Прошу помощи в решении этой проблемы, за ранее всем спасибо! |
candro,
а где строка 12 которая для изменений в инпуте ... на форуме так то куча того что вам надо но как быть с приставкой руб может её в спан? |
candro,
для медитации http://javascript.ru/forum/jquery/56...tml#post374610 если будут вопросы сделайте полноценный макет как по ссылке выше. |
видел я эти темы, как только не пробовал. можно обернуть и в спан по идее. 12 строки нету там
|
candro,
строки 109 - 116 это то что вы ищите плюс продублировать slide: в change: и этого будет достаточно |
Не совсем понял как сделать...
|
slider jquery-ui value in input
candro,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slider demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/mint-choc/jquery-ui.css">
<style>
#slider-zaim { margin: 10px;width : 500px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="slider-zaim"></div>
<input id="amount" value="0">
<script>
$(function() {
var b = $("#amount"),
a = $("#slider-zaim");
a.slider({
range: "min",
min: 100,
value: 100,
max: 1E4,
step: 100,
change: function(a, c) {
b.val(c.value)
},
slide: function(a, c) {
b.val(c.value)
}
});
b.val(100).focusout(function() {
a.slider("value", this.value)
}).focusout()
});
</script>
</body>
</html>
|
А как можно сделать чтобы при вводе одного поля, пересчитывались остальные поля?
Пример:
<div class="calc">
<div class="items">
<div class="block">
<label for="amount">Площадь дома:</label><br />
<input type="text" name="amount" id="amount"><br />
</div>
<div class="block">
<label for="amount">Стоимость монтажа:</label><br />
<input type="text" id="price" readonly><br />
</div>
<div class="block">
<label for="amount">Производство элементов:</label><br />
<input type="text" id="price_2" readonly><br />
</div>
<div class="block">
<label for="amount">Общая стоимость</label><br />
<input type="text" id="price_3" readonly><br />
</div>
</div>
<div id="slider-range-min"></div>
</div>
и мой js
$( "#slider-range-min" ).slider({
// orientation: "vertical",
step: 10,
range: "min",
min: 50,
max: 500,
value: 100,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + " м" );
// $( "#amount_1" ).val( ui.value[ 1 ] );
$( "#price" ).val( ui.value * 650 + " руб");
$( "#price_2" ).val( ui.value * 1200 + " руб");
$( "#price_3" ).val( ui.value * 1850 + " руб");
}
});
$( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) );
$( "#price" ).val( $( "#slider-range-min" ).slider( "value" ) * 650 + " руб" );
$( "#price_2" ).val( $( "#slider-range-min" ).slider( "value" ) * 1200 + " руб" );
$( "#price_3" ).val( $( "#slider-range-min" ).slider( "value" ) * 1850 + " руб" );
$("input#amount").change(function(){
var value1=$("input#amount").val();
var value2=$("input#price").val();
if(parseInt(value1) > parseInt(value2)){
value1 = value2;
$("input#amount").val(value1);
$("input#price").val(value2);
}
$("#slider-range-min").slider("value" ,value1);
});
При передвижении ползунка все инпуты пересчитываются как надо. Но когда вводим значение в поле "Площадь дома" ползунок перескакивает на нужное положение, но остальные инпуты не пересчитываются. |
Цитата:
посмотреть пост №7 и добавить недостающий параметр, продублировав в него всё из уже имеющегося у вас. |
Цитата:
b.val(100).focusout(function() {
a.slider("value", this.value)
}).focusout()
|
| Часовой пояс GMT +3, время: 05:22. |