$("#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.
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.
You attach to the change
event of your input like so:
$("#storlek_testet").change(function() {
$("#storlekslider").slider("value", $(this).val());
});
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/
$("#storlek_testet").keyup(function() {
$("#storlekslider").slider("value" , $(this).val())
});
http://jsfiddle.net/C8X4D/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With