[jQueryUI] 슬라이더 구현

Front-End/jQueryUI

[jQueryUI] 슬라이더 구현 - slider()

리딩리드 2017. 2. 10. 15:41

슬라이더 구현 - slider()

1. 정의

-slider() 위젯을 사용하여 슬라이더 구현

2. 구문

- $(슬라이더).slider({매개변수: 값...})

1) 매개변수

매개변수	개요
max	최대값
min	최소값
step	증감 간격
value	슬라이더 초기값
values	슬라이더의 초기값(손잡이 두개)
animate	클릭시 그 장소에 손잡이 이동 속도(fast/slow)
orientation	슬라이더 방향(horizontal/vertical)
range	범위 슬라이더 생성
create	슬라이더 생성 시 이벤트 리스너
change	슬라이더 값을 변경 했을 때

3. 예

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css" /> </head> <form> <input id="count" type="text" size="3" readonly/> <div id="slider" style="width:200px;"></div> </form> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/i18n/jquery-ui-i18n.min.js"></script> <script> $(function(){ $('#slider').slider({ min:0, max:200, step:10, value:100, change:function(e, ui){ $('#count').val(ui.value); }, create:function(e, ui){ $('#count').val($(this).slider('option','value')); } }); }); </script>