Jquery UI Slider меняет значение ползунка при изменении в поле ввода

$("#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

я пытаюсь заставить ползунок перейти в правильное положение, когда я изменяю значение в поле ввода. Я использую ползунок пользовательского интерфейса Jquery.


jquery jquery-ui uislider jquery-ui-slider
person oBo    schedule 09.10.2012    source источник

Ответы (3)


arrow_upward
20
arrow_downward

Вы присоединяетесь к событию change вашего ввода следующим образом:

$("#storlek_testet").change(function() {
    $("#storlekslider").slider("value", $(this).val());
});
person Constantinius    schedule 09.10.2012
comment
$(this).val() можно использовать вместо селектора $(storlek_testet).val() - person Yiğit Yener; 09.10.2012
comment
также отсутствуют # и ); ;-) - person Ch4rAss; 09.10.2012

arrow_upward
10
arrow_downward

Изменить значения из нескольких входов:

$("#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/

person Human    schedule 03.07.2016

arrow_upward
5
arrow_downward 

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

http://jsfiddle.net/C8X4D/

person Ch4rAss    schedule 09.10.2012
comment
как реализовать это для панели параметров плагина wordpress - person Firefog; 13.11.2015
comment
change() предпочтительнее keyup(), если input имеет тип number, потому что keyup() не будет применять изменения, когда для изменения входного значения используются кнопки вверх/вниз поля. - person Skippy le Grand Gourou; 21.01.2019