Jquery UI Slider change value of slider when changed in input field

Question

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

Heres a js fiddle

im trying to get the slider to jump to the correct position when I change the value in the input field. Iam using the Jquery UI slider.

score 20 · Accepted Answer · edited Feb 18 '18 at 11:28

20

You attach to the change event of your input like so:

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

edited Feb 18 '18 at 11:28

Alex

117
1
6

answered Oct 09 '12 at 08:07

Constantinius

34,183
8
77
85

$(this).val() can be used instead of the selector $("storlek_testet").val() – Yiğit Yener Oct 09 '12 at 08:15
there is also `#` and `);` missing ;-) – Ch4rAss Oct 09 '12 at 08:17

score 10 · Answer 2 · answered Jul 03 '16 at 13:22

Change values from several inputs:

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

score 5 · Answer 3 · answered Oct 09 '12 at 08:14

5

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

http://jsfiddle.net/C8X4D/

answered Oct 09 '12 at 08:14

Ch4rAss

754
3
18

how to implement it for wordpress plugin option panel – Firefog Nov 13 '15 at 10:33
`change()` is preferable to `keyup()` if `input` is of type `number`, because `keyup()` won't apply changes when the field up/down buttons are used to change the input value. – Skippy le Grand Gourou Jan 21 '19 at 11:20

Jquery UI Slider change value of slider when changed in input field

3 Answers3