Форум

candro · #1 (**permalink**) 29.01.2016, 14:38

Добрый день, столкнулся с небольшой проблемкой, которую с моими знаниями не решить.
В общем есть слайдер:

<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 у ползунка при изменении в инпуте, но как не понял.

Перерыл кучу страниц полезной информации, но никак применить ее не смог.

Прошу помощи в решении этой проблемы, за ранее всем спасибо!

рони · #2 (**permalink**) 29.01.2016, 14:52

candro,
а где строка 12 которая для изменений в инпуте ... на форуме так то куча того что вам надо но как быть с приставкой руб может её в спан?

рони · #3 (**permalink**) 29.01.2016, 15:03

candro,
для медитации jquery ui ползунок как
если будут вопросы сделайте полноценный макет как по ссылке выше.

candro · #4 (**permalink**) 29.01.2016, 15:13

видел я эти темы, как только не пробовал. можно обернуть и в спан по идее. 12 строки нету там

рони · #5 (**permalink**) 29.01.2016, 15:16

candro,
строки 109 - 116 это то что вы ищите плюс продублировать slide: в change: и этого будет достаточно

candro · #6 (**permalink**) 29.01.2016, 15:26

Не совсем понял как сделать...

рони · #7 (**permalink**) 29.01.2016, 15:52

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>

Kirilbl4 · #8 (**permalink**) 19.05.2017, 08:06

А как можно сделать чтобы при вводе одного поля, пересчитывались остальные поля?
Пример:

<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);	
		  });

При передвижении ползунка все инпуты пересчитываются как надо. Но когда вводим значение в поле "Площадь дома" ползунок перескакивает на нужное положение, но остальные инпуты не пересчитываются.

рони · #9 (**permalink**) 19.05.2017, 10:36

Сообщение от Kirilbl4

но остальные инпуты не пересчитываются.

для медитации ...
посмотреть пост №7 и добавить недостающий параметр, продублировав в него всё из уже имеющегося у вас.

Kirilbl4 · #10 (**permalink**) 22.05.2017, 09:02

Сообщение от рони

для медитации ...
посмотреть пост №7 и добавить недостающий параметр, продублировав в него всё из уже имеющегося у вас.

Имеете ввиду этот параметр?

b.val(100).focusout(function() {
        a.slider("value", this.value)
}).focusout()

Форум

Справочник

Discord чат

Курсы javascript