• J볃교

JQUERY UI(SLIDER) 을 이용한 출력 및 반응형

2019-01-25 235

설명

  • 카카오톡 링크

JQUERY UI 의 SLIDER 에 대해서 실행영상입니다~!

반응형인 SLIDER 까지 포함되어 있습니다~!

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )



<h3 class="view_h3">가로 모양의 slider</h3> 
<div class="line">
	<label for="amount">Maximum price:</label>
	<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
	<div id="slider-range-min"></div>
</div>

<h3 class="view_h3">세로 모양의 slider</h3> 
<div class="line">
	<label for="amount2">Maximum price:</label>
	<input type="text" id="amount2" readonly style="border:0; color:#f6931f; font-weight:bold;">
	<div id="slider-range-min2"></div>
</div>

<h3 class="view_h3">반응형(세로 -> 가로) 모양의 slider</h3> 
<div class="line">
	<label for="amount3">Maximum price:</label>
	<input type="text" id="amount3" readonly style="border:0; color:#f6931f; font-weight:bold;">
	<div id="slider-range-min3"></div>
</div>

<script type="text/javascript">
	$(document).ready(function() {
		var handle = $("#custom-handle");
		$( "#slider-range-min" ).slider({
			orientation : "horizontal",
			range: "min",
			value: 37,
			min: 1,
			max: 700,
			slide: function( event, ui ) {
				$( "#amount" ).val( "$" + ui.value );
			}
		});
		$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );

		$( "#slider-range-min2" ).slider({
			orientation : "vertical",
			range: "min",
			value: 37,
			min: 1,
			max: 700,
			slide: function( event, ui ) {
				$( "#amount2" ).val( "$" + ui.value );
			}
		});
		$( "#amount2" ).val( "$" + $( "#slider-range-min2" ).slider( "value" ) );

		var slider = $( "#slider-range-min3" ).slider({
			orientation : "vertical",
			range: "min",
			value: 37,
			min: 1,
			max: 700,
			slide: function( event, ui ) {
				$( "#amount3" ).val( "$" + ui.value );
			}
		});

		$( "#amount3" ).val( "$" + $( "#slider-range-min2" ).slider( "value" ) );

		if(window.innerWidth < 950) {
			slider.slider( "option", "orientation", "horizontal" );
		} else {
			slider.slider( "option", "orientation", "vertical" );
		}

		$(window).resize(function() {
			if(window.innerWidth < 950) {
				slider.slider( "option", "orientation", "horizontal" );
			} else {
				slider.slider( "option", "orientation", "vertical" );
			}
		});
	});
</script>