• Open API/Jquery

    jQuery Slider Bar / 슬라이더 바 3종 샘플

    2016. 11. 17.

    by. Yo.

    728x90



    슬라이더 바 샘플입니다.


    Jquery UI 사이트의 Slider bar 중 사용빈도 수가 높은 샘플을 정리해보았습니다.


    Test Url : http://www.uhoon.co.kr/test/3377.html


    참고 Url : http://jqueryui.com/slider/



    1. 최대/최소값을 지정하는 슬라이더 바


    2. 구간을 선택하는 슬라이더 바


    3. 최대/최소 값중 증가값을 지정하는 슬라이더 바




    <!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>jQuery UI Slider</title>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
	<script src="//code.jquery.com/jquery-1.10.2.js"></script>
	<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
	<script>
		$(function() {
			$("#slider-range-max").slider({
				range: "max",
				min: 1,
				max: 10,
				value: 2,
				slide: function(event, ui) {
					$("#amount").val(ui.value);
				}
			});
			$("#amount").val($("#slider-range-max").slider("value"));


			$("#slider-range").slider({
				range: true,
				min: 0,
				max: 500,
				values: [75, 300],
				slide: function(event, ui) {
					$("#amount2").val("$" + ui.values[0] + " - $" + ui.values[1]);
				}
			});
			$("#amount2").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));

			$("#slider").slider({
				value:10,
				min: 0,
				max: 100,
				step: 10,
				slide: function( event, ui ) {
					$( "#amount3" ).val( "$" + ui.value );
				}
			});
			$( "#amount3" ).val( "$" + $( "#slider" ).slider( "value" ) );
		});
	</script>
</head>

<body>

	<p>
		<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
	</p>
	<div id="slider-range-max"></div>

	<p>
		<input type="text" id="amount2" readonly style="border:0; color:#f6931f; font-weight:bold;">
	</p>
	<div id="slider-range"></div>

	<p>
		<input type="text" id="amount3" readonly style="border:0; color:#f6931f; font-weight:bold;">
	</p>
	<div id="slider"></div>
</body>

</html>
    728x90
    저작자표시 (새창열림)

    댓글

    관련글

    맨 위로
전체 글 보기

티스토리툴바