ui > rgb slider

<script>
$("#red,#green,#blue").slider({
	orientation:"horizontal",
	range:"min",
	max:255,
	value:127,
	slide:refreshSwatch, // 슬라이더바를 움직일때마다 실행되는 함수
	change:refreshSwatch // 슬라이더값이 변경될때마다 실행되는 함수
});

// red, green, blue 슬라이더바가 변할때마다 실행되는 함수
function refreshSwatch() {
	var red = $("#red").slider("value");
	var green = $("#green").slider("value");
	var blue = $("#blue").slider("value");
	var my_rgb = "rgb("+red+","+green+","+blue+")";
	$("#swatch").css("background-color",my_rgb);
	$("#red_val").val(red );
	$("#green_val").val( green);
	$("#blue_val").val( blue);
	$("#color_val").val(my_rgb);
}

// 페이지를 로딩했을때 기본값
$("#red").slider("value", 127);
$("#green").slider("value", 127);
$("#blue").slider("value", 127);
</script>

* html

<div id="swatch"></div>
<br />
<input type="text" id="color_val" readonly />
<br />
<div id="red"></div>
<input type="text" id="red_val" readonly />
<br />
<div id="green"></div>
<input type="text" id="green_val" readonly />
<br />
<div id="blue"></div>
<input type="text" id="blue_val" readonly />