등록일 : ,
간단 예제 1
아래 슬라이더를 움직여 보세요.

슬라이더를 움직여 봐요
<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/0040.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 );
}
});
간단 예제 2
아래 슬라이더를 움직여 보세요.
간단 예제1 에서 옵션값 추가 & 수정.
간단 예제1 에서 옵션값 추가 & 수정.

슬라이더를 움직여 봐요
자바스크립트
$('#slider').slider({
// 슬라이더바 이하값 색 강조
range : 'min', // max 로 설정시 이상값 강조
min : 200,
max : 800,
value : 500,
// 증가하는 단계값 (지정하지 않으면 1)
step : 40,
// 슬라이더를 움직일때 실행할 코드
slide : function( event, ui ){
// ui.value 는 현재 슬라이더의 값
$('#sliderText').html( '슬라이더 값 : ' + ui.value );
$('#sliderImg').css( 'width', ui.value );
}
});
간단 예제 3
- 슬라이더 두개가 연동되어 움직이는 예제.
- 슬라이더 값 읽기 쓰기 예제.
- range 옵션 적용해 보기.
- 슬라이더 값 읽기 쓰기 예제.
- range 옵션 적용해 보기.




CSS
#slider1 { width:400px; margin:0 auto; }
#slider2 { width:500px; margin:10px auto; }
HTML
<div id="slider1"></div><!-- 슬라이더1 -->
<div id="slider2"></div><!-- 슬라이더2 -->
<img name="sliderImg" src="https://ktsmemo.cafe24.com/p/0001.jpg">
<img name="sliderImg" src="https://ktsmemo.cafe24.com/p/0284.jpg"><br>
<img name="sliderImg" src="http://oldmidi.cdn3.cafe24.com/p/0817.jpg">
<img name="sliderImg" src="http://oldmidi.cdn3.cafe24.com/p/0298.jpg">
자바스크립트
$('#slider1').slider({
// 슬라이더바 이하값 색 강조
range : 'min',
min : 200,
max : 600,
value : 500,
// 슬라이더를 움직일때 실행할 코드
slide : function( event, ui ){
// ui.value 는 현재 슬라이더의 값
$('[name=sliderImg]').css('width', ui.value);
// 슬라이더2에 값 설정
$('#slider2').slider('value', ui.value);
}
});
$('#slider2').slider({
// 슬라이더바 이상하값 색 강조
range : 'max',
min : 200,
max : 600,
value : 500,
// 슬라이더를 움직일때 실행할 코드
slide : function( event, ui ){
// ui.value 는 현재 슬라이더의 값
$('[name=sliderImg]').css('width', ui.value);
// 슬라이더1에 값 설정
$('#slider1').slider('value', ui.value);
}
});
실행 가능한 소스
재미 삼아 해보는 슬라이더 응용 예제
이것도 한번 구경해 보세요 ^^*
방문해 주셔서 감사드립니다 !!