jQuery UI 슬라이더(Slider) 간단 예제

간단 예제

<link rel="stylesheet" href="/css/jquery-ui.min.css">

CSS

#slider { width:400px; margin:0 auto; }
#sliderImg { margin-top:10px; }
#sliderText { text-align:center; color:blue; }

HTML

<!-- 슬라이더 -->
<div id="slider"></div>
<img id="sliderImg" src="http://ktsmemo.cdn3.cafe24.com/p/0618.jpg">
<div id="sliderText">슬라이더를 움직여 봐요</div>

자바스크립트

$('#slider').slider({

	// 최소값 (지정하지 않으면 0)
	min : 200,

	// 최대값 (지정하지 않으면 100)
	max : 800,

	// 슬라이더 현재값 (지정하지 않으면 0)
	value : 500,

	// 증가하는 단계값 (지정하지 않으면 1)
	step : 1,

	// 슬라이더를 움직일때 실행할 코드
	slide : function( event, ui ){
		// ui.value 는 현재 슬라이더의 값
		$('#sliderText').html( '슬라이더 값 : ' + ui.value );
		$('#sliderImg').css( 'width', ui.value );
	}

});

전체소스 - 간단예제3

See the Pen YzXKRMN by 최충현 (@nenara) on CodePen.

 

 

 

 

출처 : http://ktsmemo.cafe24.com/s/dev/697