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

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

使用方法
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は初期値です。
Safariぽいスライダーを作るJavaScript「jQuery Slider plugin」サンプル

sponsors

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

記事作成:
記事URL:

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