Изменение 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()
|
Kirilbl4,
скопировать строки 8-16 js пост №8 и повторить ещё раз, изменив только slide на change |
Спасибо, рони. Все получилось.
Еще один глупый вопрос если можно. Для полного счастья мне не хватает "м" в первом инпуте $( "#amount" ).val( ui.value ) ; Если сделаю $( "#amount" ).val( ui.value + "м" ) ; и $( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) +"м" ); Все четко работает без косяков. Но это до тех пор пока значение не ввожу сам. При вводе функция ломается и во всех полях вместо нужных значений выводится NAN. Думаю что где-то тут нужно что-то дописать.
$("input#amount").change(function(){
var value1=$("input#amount").val();
var value2=$("input#amount").val();
if(parseInt(value1) > parseInt(value2)){
value1 = value2;
$("input#amount").val(value1);
}
$("#slider-range-min").slider("value",value1);
});
Подскажите в каком направлении двигаться? |
Цитата:
|
Если ставить только тут
$( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) +"м" );, то при смещении ползунка она теряется. |
var value1= +$("input#amount").val(),
value2= +$("input#amount").val();
if(value1 > value2){
value1 = value2;
....
Конечно, если ввод это действительно числа. |
slider jqueryui значение из input
Kirilbl4,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
#slider-range-min{
margin:10px;
width:500px;
height:8px;
}
.ui-widget-header{
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-slider .ui-slider-handle{
background-color: hsla(51, 100%, 50%, 1);
color: hsla(16, 100%, 50%, 1);
padding: 2px;
background-image: none;
border-radius:50%;
position:relative;
font-size:12px;
display:block;
width: 2em;
height: 2em;
top:-0.8em;
line-height: 1.8em;
text-align: center;
}
.ui-slider .ui-slider-handle:focus{
outline:0;
border:0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$("#slider-range-min").slider({
step: 10,
range: "min",
min: 50,
max: 500,
value: 100,
slide: setAmount,
change: setAmount
});
function setAmount(event, ui) {
var amount = ui ? ui.value : 100;
$(".ui-slider-handle").text(amount);
$("#amount").val(amount + " м");
$("#price").val(amount * 650 + " руб");
$("#price_2").val(amount * 1200 + " руб");
$("#price_3").val(amount * 1850 + " руб")
}
$("input#amount").on("change", function() {
var amount = parseInt(this.value, 10) || 100;
$("#slider-range-min").slider("value", amount)
}).change()
});
</script>
</head>
<body>
<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>
</body>
</html>
|
рони, прям кудесник. Спасибо большое.
|
| Часовой пояс GMT +3, время: 19:54. |