Jquery UI Slider在输入字段中更改时更改滑块的值

Posted 2023-03-13

【中文标题】Jquery UI Slider在输入字段中更改时更改滑块的值

【英文标题】：Jquery UI Slider change value of slider when changed in input field

【发布时间】：2012-10-09 07:53:19

【问题描述】：

$("#storlekslider").slider(
  range: "max",
  min: 0,
  max: 1500,
  value: 0,
  slide: function(event, ui) 
    $("#storlek_testet").val(ui.value);
    $(ui.value).val($('#storlek_testet').val());
  
);
// $( "#storlek_testet" ).val( $( "#storlekslider" ).slider( "value" ) );

$("#storlek_testet").change(function() 
  $("#storlekslider").slider("value", $(this).val());
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<div id="storlekslider"></div>
<input type="text" name="storlek" id="storlek_testet" value="500" />

这是js fiddle

当我更改输入字段中的值时，我试图让滑块跳到正确的位置。 我正在使用Jquery UI slider。

【参考方案1】：

您像这样附加到您输入的change 事件：

$("#storlek_testet").change(function() 
    $("#storlekslider").slider("value", $(this).val());
);

【讨论】：

$(this).val() 可以用来代替选择器 $("storlek_testet").val()

还缺少# 和); ;-)

【参考方案2】：

从多个输入更改值：

$("#input-1").change(function() 
    $("#slider").slider('values',0,$(this).val());
);
$("#input-2").change(function() 
    $("#slider").slider('values',1,$(this).val());
);

https://jsfiddle.net/brhuman/uvx6pdc1/

【参考方案3】：

$("#storlek_testet").keyup(function() 
    $("#storlekslider").slider("value" , $(this).val())
);

http://jsfiddle.net/C8X4D/

【讨论】：

wordpress插件选项面板如何实现

如果input 的类型为number，则

change() 优于keyup()，因为keyup() 在使用字段向上/向下按钮更改输入时不会应用更改价值。