heeestorys :: [jQueryUI] 범위 슬라이더 - spinner(orientation, range)

[jQueryUI] 범위 슬라이더 - spinner(orientation, range)

Front-End/jQueryUI 2017. 2. 10. 16:11

범위 슬라이더 - spinner(orientation, range)

1. 정의

- range, value 매개변수를 이용하여 범위 슬라이더 구현

2. 예

<!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_max" type="text" size="3" readonly/> ~ <input id="count_min" type="text" size="3" readonly/> <div id="slider"></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({ orientation:'vertical', min:0, max:200, range:true, values:[80.150], change:function(e,ui){ $('#count_min').val(ui.values[0]); $('#count_max').val(ui.values[1]); }, create:function(e, ui){ var values = $(this).slider('option','values'); $('#count_min').val(values[0]); $('#count_max').val(values[1]); } }); }); </script>

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] jQuery 버튼 위젯(체크박스, 라디오, 버튼) - button(), buttonset() (0)	2017.02.10
[jQueryUI] 슬라이더 구현 - slider() (0)	2017.02.10
[jQueryUI] 수치 입력박스 (0)	2017.02.10
[jQueryUI] 버튼으로 날짜 팝업 만들기 - datepicker(showOn) (0)	2017.02.02
[jQueryUI] 날짜 선택 팝업의 범위 지정 - datepicker(minDate/maxDate) (0)	2017.02.02

리딩리드

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

[jQueryUI] 범위 슬라이더 - spinner(orientation, range)

'Front-End > jQueryUI' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바