jQuery UI の Slider プラグインによるスライダーを使ったシンプルなカラーピッカー。
実装例（サンプル）
実装例（サンプル）の動作について
赤、緑、青の3つのいづれかのスライダーを動かすと、右のオレンジ色のボックスの色が変化する。
同時に、「HEX：」の右横のHEXカラーコードの値と、「RGB：」の右横のRGBカラーモデルの値も変化する。
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
まとめて読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
個別に読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="ui/jquery.ui.slider.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="ui/jquery.ui.slider.js"></script>
JavaScript
<script>
<!--
function hexFromRGB( r, g, b ) {
var hex = [
r . toString( 16 ),
g . toString( 16 ),
b . toString( 16 )
];
jQuery.each( hex, function( nr, val ) {
if ( val . length === 1 ) {
hex[ nr ] = "0" + val;
}
} );
return hex . join( '' ) . toUpperCase();
}
function refreshSwatch() {
var red = jQuery( '#colorpicker-red' ) . slider( 'value' );
var green = jQuery( '#colorpicker-green' ) . slider( 'value' );
var blue = jQuery( '#colorpicker-blue' ) . slider( 'value' );
var hex = hexFromRGB( red, green, blue );
jQuery( '#colorpicker-swatch' ) . css( 'background-color', '#' + hex );
jQuery( '#colorpicker-hex' ) . html( 'HEX： #' + hex );
jQuery( '#colorpicker-rgb' ) . html( 'RGB： (' + red + ',' + green + ',' +blue + ')' );
}
jQuery( function() {
jQuery( '#colorpicker-red, #colorpicker-green, #colorpicker-blue' ) . slider( {
orientation: 'horizontal',
range: 'min',
max: 255,
value: 127,
slide: refreshSwatch,
change: refreshSwatch
} );
jQuery( '#colorpicker-red' ) . slider( 'value', 255 );
jQuery( '#colorpicker-green' ) . slider( 'value', 128 );
jQuery( '#colorpicker-blue' ) . slider( 'value', 0 );
} );
// -->
</script>
<!--
function hexFromRGB( r, g, b ) {
var hex = [
r . toString( 16 ),
g . toString( 16 ),
b . toString( 16 )
];
jQuery.each( hex, function( nr, val ) {
if ( val . length === 1 ) {
hex[ nr ] = "0" + val;
}
} );
return hex . join( '' ) . toUpperCase();
}
function refreshSwatch() {
var red = jQuery( '#colorpicker-red' ) . slider( 'value' );
var green = jQuery( '#colorpicker-green' ) . slider( 'value' );
var blue = jQuery( '#colorpicker-blue' ) . slider( 'value' );
var hex = hexFromRGB( red, green, blue );
jQuery( '#colorpicker-swatch' ) . css( 'background-color', '#' + hex );
jQuery( '#colorpicker-hex' ) . html( 'HEX： #' + hex );
jQuery( '#colorpicker-rgb' ) . html( 'RGB： (' + red + ',' + green + ',' +blue + ')' );
}
jQuery( function() {
jQuery( '#colorpicker-red, #colorpicker-green, #colorpicker-blue' ) . slider( {
orientation: 'horizontal',
range: 'min',
max: 255,
value: 127,
slide: refreshSwatch,
change: refreshSwatch
} );
jQuery( '#colorpicker-red' ) . slider( 'value', 255 );
jQuery( '#colorpicker-green' ) . slider( 'value', 128 );
jQuery( '#colorpicker-blue' ) . slider( 'value', 0 );
} );
// -->
</script>
CSS
<style>
<!--
#colorpicker-wrap {
border: 1px solid #d0d0d0;
border-radius: 10px;
padding: 10px 5px;
background: #fafafa;
}
#colorpicker-red, #colorpicker-green, #colorpicker-blue {
float: left;
clear: left;
width: 300px;
margin: 9px 10px;
}
#colorpicker-swatch {
width: 120px;
height: 100px;
margin-top: 0;
margin-left: 10px;
background-image: none;
}
#colorpicker-red .ui-slider-range {
background: #ef2929;
}
#colorpicker-red .ui-slider-handle {
border-color: #ef2929;
}
#colorpicker-green .ui-slider-range {
background: #8ae234;
}
#colorpicker-green .ui-slider-handle {
border-color: #8ae234;
}
#colorpicker-blue .ui-slider-range {
background: #729fcf;
}
#colorpicker-blue .ui-slider-handle {
border-color: #729fcf;
}
#colorpicker-hex, #colorpicker-rgb {
margin: 15px;
}
-->
</style>
<!--
#colorpicker-wrap {
border: 1px solid #d0d0d0;
border-radius: 10px;
padding: 10px 5px;
background: #fafafa;
}
#colorpicker-red, #colorpicker-green, #colorpicker-blue {
float: left;
clear: left;
width: 300px;
margin: 9px 10px;
}
#colorpicker-swatch {
width: 120px;
height: 100px;
margin-top: 0;
margin-left: 10px;
background-image: none;
}
#colorpicker-red .ui-slider-range {
background: #ef2929;
}
#colorpicker-red .ui-slider-handle {
border-color: #ef2929;
}
#colorpicker-green .ui-slider-range {
background: #8ae234;
}
#colorpicker-green .ui-slider-handle {
border-color: #8ae234;
}
#colorpicker-blue .ui-slider-range {
background: #729fcf;
}
#colorpicker-blue .ui-slider-handle {
border-color: #729fcf;
}
#colorpicker-hex, #colorpicker-rgb {
margin: 15px;
}
-->
</style>
HTML
<div id="colorpicker-wrap">
<div style="float: left;">
<div id="colorpicker-red"></div>
<div id="colorpicker-green"></div>
<div id="colorpicker-blue"></div>
</div>
<div style="float: left;">
<div id="colorpicker-swatch" class="ui-widget-content ui-corner-all"></div>
</div>
<div style="float: left;">
<div id="colorpicker-hex"></div>
<div id="colorpicker-rgb"></div>
</div>
<div style="clear: both;"></div>
</div>
<div style="float: left;">
<div id="colorpicker-red"></div>
<div id="colorpicker-green"></div>
<div id="colorpicker-blue"></div>
</div>
<div style="float: left;">
<div id="colorpicker-swatch" class="ui-widget-content ui-corner-all"></div>
</div>
<div style="float: left;">
<div id="colorpicker-hex"></div>
<div id="colorpicker-rgb"></div>
</div>
<div style="clear: both;"></div>
</div>