Slider Range ввод в поле

111
27 октября 2019, 23:50

подскажите как обработать ввод в инпуты и чтобы ползунок менял значение

    $( ".cash #slider-range-max" ).slider({ 
        range: "max", 
        min: 30000, 
        max: 999000, 
        value: 30000, 
        slide: function( event, ui ) { 
            $( ".cash #amount" ).val( ui.value ); 
            $( ".cash .amount-title" ).html( ui.value +"₽" ); 
            calcSumm(); 
        } 
    }); 
    $( ".cash #amount" ).val( $("#slider-range-max" ).slider( "value" )); 
    $( ".month #range-mounth").slider({ 
        range: "max", 
        min: 1, 
        max: 12, 
        value: 1, 
        slide: function( event, ui ) { 
            $( ".month #month" ).val( ui.value ); 
            $( ".month .month-title" ).html( ui.value +" месяцев" ); 
            calcSumm(); 
        } 
    }); 
    $( ".month #month" ).val($( "#range-mounth" ).slider( "value" ));
<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>jQuery UI Slider - Slider bound to select</title> 
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
  <link rel="stylesheet" href="/resources/demos/style.css"> 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
  <script> 
 
  </script> 
</head> 
<body> 
  
<div class="data-item cash"> 
    <span class="title">Сумма инвестиций *:</span> 
    <span class="amount-title"></span> 
    <input type="text" id="amount" name="amount" value="30000"> 
    <div id="slider-range-max"></div> 
</div> 
<div class="data-item month"> 
    <span class="title">Срок инвестиций *:</span> 
    <span class="month-title"></span> 
    <input type="text" id="month" name="month" value="1"> 
    <div id="range-mounth"></div> 
</div> 
</body> 
</html>

Answer 1

Например так:

$(".cash #amount").on('input', function() {
 valInput = this.value;
  $( ".cash #slider-range-max" ).slider( "option", "value", valInput );
  $( ".cash #amount" ).val( valInput );
  $( ".cash .amount-title" ).html( valInput +"₽" );
});


$( ".cash #slider-range-max" ).slider({ 
        range: "max", 
        min: 30000, 
        max: 999000, 
        value: 30000, 
        slide: function( event, ui ) { 
            $( ".cash #amount" ).val( ui.value ); 
            $( ".cash .amount-title" ).html( ui.value +"₽" ); 
            /*calcSumm();*/ 
        } 
    }); 
    $(".cash #amount").on('input', function() { 
     valInput = this.value; 
      $( ".cash #slider-range-max" ).slider( "option", "value", valInput ); 
      $( ".cash #amount" ).val( valInput ); 
      $( ".cash .amount-title" ).html( valInput +"₽" ); 
    }); 
     
    $( ".cash #amount" ).val( $("#slider-range-max" ).slider( "value" )); 
    $( ".month #range-mounth").slider({ 
        range: "max", 
        min: 1, 
        max: 12, 
        value: 1, 
        slide: function( event, ui ) { 
            $( ".month #month" ).val( ui.value ); 
            $( ".month .month-title" ).html( ui.value +" месяцев" ); 
            /*calcSumm();*/ 
        } 
    }); 
    $( ".month #month" ).val($( "#range-mounth" ).slider( "value" ));
<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>jQuery UI Slider - Slider bound to select</title> 
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
  <link rel="stylesheet" href="/resources/demos/style.css"> 
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
  <script> 
 
  </script> 
</head> 
<body> 
  
<div class="data-item cash"> 
    <span class="title">Сумма инвестиций *:</span> 
    <span class="amount-title"></span> 
    <input type="text" id="amount" name="amount" value="30000"> 
    <div id="slider-range-max"></div> 
</div> 
<div class="data-item month"> 
    <span class="title">Срок инвестиций *:</span> 
    <span class="month-title"></span> 
    <input type="text" id="month" name="month" value="1"> 
    <div id="range-mounth"></div> 
</div> 
</body> 
</html>

READ ALSO
Может ли react-router обрабатывать редирект с сервера?
javascript

Может ли react-router обрабатывать редирект с сервера?

Имеется обработчик на сервере:

 101
Как найти в объекте число и сравнить его
javascript

Как найти в объекте число и сравнить его

Есть объект:

 109
Подключить js-скрипты к Spring Boot - проекту
javascript

Подключить js-скрипты к Spring Boot - проекту

Использую библиотеку Spring BootСверстал элементарную html-страницу(не смотрите на этот код, знаю, он плох, я никогда не верстал да и вряд ли буду,...

 128
смена расположений блоков js, vanilla [закрыт]
javascript

смена расположений блоков js, vanilla [закрыт]

есть два абзаца, условно A и B, только при нажатии на верхний блок, на сам абзац он меняется местами с нижним, то есть кликабельный только верхнийвсегда...

 126