Question

我使用jQuery UI滑块在文本框中设置值。我喜欢这两种方式，但是，如果在文本框中放置了一个值，我希望滑块移动到相关位置。

我不确定这方面的最佳解决方案。

我有以下标记：

<label for="amount-depoist">Deposit Amount (&pound;):</label>
<input type="text" id="amount-deposit" >
<div id="slider-deposit"></div>

以下jQuery：

jQuery( document ).ready(function( $ ) {
            $( "#slider-deposit" ).slider({
                range: "min",
                value: 100,
                min: 0.1,
                max: 0.7,
                step: 1,        

                slide: function( event, ui ) {
                     $( "#amount-deposit" ).val(Number(ui.value).toFixed(2));
                    totalPayableFunc();
                    monthlyPaymentsFunc();
                }
            });
            $( "#amount-deposit" ).val(Number($( "#slider-deposit" ).slider( "value" )).toFixed(2));
            totalPayableFunc();
            monthlyPaymentsFunc();
        });

目前在滑块slide: function上，有些函数被称为“数学”和“数学”。并在amount-deposit文本输入字段中设置一个值。我希望此文本输入字段可以编辑，因此在keyup上滑块会滑动到相关位置。我不确定如何实现这一点，任何人都可以提出一些建议。

我在这里有一个JS小提琴：https://jsfiddle.net/liamrfell/nzzb8nad/1/

Answer 1

从概念上讲，你已经知道自己需要做什么了。在keyup事件中，您需要获取inputbox中的值，并将值放入滑块。你正在寻找的功能是 $（“＃slider”）.slider（“option”，“value”，valueVariable）

HTML：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

<body>
  <label>InputBox:</label>
  <input type="number" id="inputbox" />
  <br>
  <br>

  <div id="slider"></div>
</body>

JS：

$(document).ready(function(){
  $("#inputbox").val(50);
  $( "#slider" ).slider({
    range: "min",
    value: 50,
    min: 1,
    max: 100,
    step: 1,        

    slide: function( event, ui ) {
      var value = $( "#slider" ).slider( "option", "value" );
      //on slide update inputbox
      $('#inputbox').val(value);

       //whatever other tasks you need to do.
    }
  });

  $("#inputbox").keyup( function(){

     //whatever other tasks you need to do.

    $( "#slider" ).slider( "option", "value", parseInt($(this).val()) );

    //whatever other tasks you need to do.

  });

});

Codepen链接：http://codepen.io/anon/pen/bExger

jQuery UI Slider（从文本输入设置）

1 个答案: