웹개발 메모장

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

전체 자바스크립트 CSS PHP HTML 기타
URL : https://ktsmemo.cafe24.com/s/dev/697
등록일 :

간단 예제 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://mabinogi.filamt.com/img/p2/0323.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 에서 옵션값 추가 & 수정.
슬라이더를 움직여 봐요

자바스크립트

$('#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 옵션 적용해 보기.

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://biketago.com/img/p/0436.jpg">
<img name="sliderImg" src="http://mabinogi.filamt.com/img/p2/0532.jpg"><br>
<img name="sliderImg" src="http://superkts.dothome.co.kr/img/p2/0522.jpg">
<img name="sliderImg" src="http://superkts.dothome.co.kr/img/p2/0248.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);
	}

});

실행 가능한 소스