2012-10-09 4 views
14

JQUERY UI 슬라이더 변동율이 입력 필드에 변경할 때 Heres는

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

I는의 값을 변경할 때 정확한 위치로 이동하는 슬라이더를 얻으 려 js fiddle

IM 입력 필드. IAM은 Jquery UI slider을 사용합니다.

답변

19

당신은 다음처럼 입력의 change 이벤트에 연결 :

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

$ ("storlek_testet") 대신 $ (this) .val()을 사용할 수 있습니다. val() –

+0

또한'#'및');'누락 ;-) – Ch4rAss

+0

고마워, 업데이트했습니다. ... – Constantinius

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

http://jsfiddle.net/C8X4D/

+0

wordpress 플러그인 옵션 패널을 구현하는 방법 – Firefog

4

변경 값을 여러 입력에서 :

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

+0

범위 슬라이더가있는 경우 잘 작동합니다. – garrettendi