Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 22.05.2017, 10:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Kirilbl4,
скопировать строки 8-16 js пост №8 и повторить ещё раз, изменив только slide на change
Ответить с цитированием
  #12 (permalink)  
Старый 24.05.2017, 10:10
Интересующийся
Отправить личное сообщение для Kirilbl4 Посмотреть профиль Найти все сообщения от Kirilbl4
 
Регистрация: 02.07.2015
Сообщений: 16

Спасибо, рони. Все получилось.
Еще один глупый вопрос если можно. Для полного счастья мне не хватает "м" в первом инпуте
$( "#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);	
});

Подскажите в каком направлении двигаться?
Ответить с цитированием
  #13 (permalink)  
Старый 24.05.2017, 11:08
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от Kirilbl4 Посмотреть сообщение
Подскажите в каком направлении двигаться?
М надо вставлять только на выводе.
Ответить с цитированием
  #14 (permalink)  
Старый 24.05.2017, 11:21
Интересующийся
Отправить личное сообщение для Kirilbl4 Посмотреть профиль Найти все сообщения от Kirilbl4
 
Регистрация: 02.07.2015
Сообщений: 16

Если ставить только тут
$( "#amount" ).val(  $( "#slider-range-min" ).slider( "value" ) +"м" );
, то при смещении ползунка она теряется.
Ответить с цитированием
  #15 (permalink)  
Старый 24.05.2017, 11:26
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

var value1= +$("input#amount").val(),
   value2= +$("input#amount").val();
if(value1 > value2){
value1 = value2;
....


Конечно, если ввод это действительно числа.
Ответить с цитированием
  #16 (permalink)  
Старый 24.05.2017, 11:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #17 (permalink)  
Старый 24.05.2017, 11:46
Интересующийся
Отправить личное сообщение для Kirilbl4 Посмотреть профиль Найти все сообщения от Kirilbl4
 
Регистрация: 02.07.2015
Сообщений: 16

рони, прям кудесник. Спасибо большое.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение значения input при смене значения select galart jQuery 4 30.01.2015 19:39
Изменение содержимого input при смене значения a Radioactive jQuery 4 09.01.2014 23:03
Изменение значения input при клике по ссылкам rammstein jQuery 11 18.10.2013 20:37
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
изменение картинок в зависимости от значения input jump91 Общие вопросы Javascript 2 30.01.2012 09:57