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

jQuery UI Slider (setting from text input)

本文关键字：输入 设置 文本 UI Slider jQuery      更新时间：2023-09-26

我正在使用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/

从概念上讲，您已经知道需要做什么。在 KeyUp 事件中，您需要在输入框中获取值，并将该值放入滑块中。而你正在寻找的函数是 $（ "#slider" ）.slider（ "选项"， "值"， 值变量 ）

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

代码笔链接：http://codepen.io/anon/pen/bExger

相关文章：