Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 442
oBo Avatar asked Oct 09 '12 07:10

oBo


People also ask

What is jQuery slider?

jQuery UI slider is used to obtain a numeric value within a certain range. The main advantage of slider over text input is that it becomes impossible for the users to enter an invalid value. Every value they can pick with the slider is valid.


3 Answers

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

$("#storlek_testet").change(function() {
    $("#storlekslider").slider("value", $(this).val());
});
like image 83
Constantinius Avatar answered Oct 02 '22 10:10

Constantinius


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/

like image 42
Human Avatar answered Oct 02 '22 10:10

Human


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

http://jsfiddle.net/C8X4D/

like image 43
Ch4rAss Avatar answered Oct 02 '22 10:10

Ch4rAss