[slider2.js] 動作サンプル: カラースライダ

slider2.js

カラーバー作成サンプル。


description
<script type="text/javascript">
var sliderR, sliderG, sliderB;
function init(){
	sliderR=new Slider2('slider-r');
	sliderG=new Slider2('slider-g');
	sliderB=new Slider2('slider-b');
	for(var i=0,s,ss=[sliderR,sliderG,sliderB];s=ss[i];i++)
		s.lever('images/cursor-11.png',{width:'10px',height:'25px'})
		.min({x:0})
		.max({x:255})
		.limit({right: 255, left: 0, top:0, bottom: 0})
		.callback(cb)
		;
	return true;
}

function cb(e){
	var r=sliderR.getValue().x;
	var g=sliderG.getValue().x;
	var b=sliderB.getValue().x;
	var rgb='rgb( '+r+' , '+g+' , '+b+' ) #'+S(r)+S(g)+S(b);
	document.getElementById('outputtext').value=rgb;
}
function S(s){
	return ('0'+s.toString(16)).substr(-2).toUpperCase();
}
</script>


<style type="text/css">
.slider {
	width: 265px; /* frame_width + lever_width */
	height: 25px;
	background: #ffffee url(images/color-r.png) 5px top no-repeat;
	padding: 0;
	margin: 0;
}
#slider-r { background-image: url(images/color-r.png); }
#slider-g { background-image: url(images/color-g.png); }
#slider-b { background-image: url(images/color-b.png); }
</style>

-->