Safariぽいスライダーを作るJavaScript「jQuery Slider plugin」

フォームなどである数値からある数値までを入力してもらいたいとき、スライダーなどで明示できるとユーザーに配慮できます。
今回はjQueryプラグインの「jQuery Slider plugin (Safari style) 」を使用し、手軽に実現してみたいと思います。

sponsors

使用方法

jQuery Slider plugin (Safari style) からファイル一式をダウンロードします。

<link rel="stylesheet" href="jslider.css" type="text/css">
	<link rel="stylesheet" href="jslider.blue.css" type="text/css">
	<!--[if IE 6]>
    <link rel="stylesheet" href="jslider.ie6.css" type="text/css" media="screen">
    <link rel="stylesheet" href="jsllider.blue.ie6.css" type="text/css" media="screen">
	<![endif]-->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.dependClass.js"></script>
<script type="text/javascript" src="jquery.slider.js"></script>
<script type="text/javascript">
$(function(){
	$("#id名").slider({ 
		from: 1000,  //スライダーの初期値
		to: 100000,  //スライダーのマックス値
		step: 500,  //間隔
		round: 0, //小数点以下の桁数
		dimension: ' 円' //テキスト
	});	 
});
</script>
あとは上記のidを付与して以下のようにすれば完成です。

<p style="display: inline-block; width: 横幅px;">
	<input id="id名" type="slider" name="price" value="30000;60000" />
</p>
※valueは初期値です。

サンプル


Javascriptサンプルページ一覧
skuare.net