jQuery UI の Slider による、数値範囲をGUIで設定するスライダー

jQuery UI の Slider プラグインを使い、数値の範囲をGUIで設定するスライダーを作る方法。数値の範囲をGUIで設定するスライダーを作るには、values、min、max、range オプションなどを使う。

実装例(サンプル)

範囲:

実装例(サンプル)について

初期値、最小値、最大値に下の値を設定してある。

  • 初期値: 1001 ~ 3000
  • 最小値: 0
  • 最大値: 10000

実装例(サンプル)の動作について

  • スライダーの2つの四角のハンドルをドラックして、トラック上を移動させることができる。
  • 左のハンドルで、範囲の小さい値の方を指定。右ののハンドルで、範囲の大きい値の方を指定。
  • トラック上をクリックすると、ハンドルを、その場所へ、移動させることができる。
  • スライダーに合わせて、「範囲:」の右横の数値が変化する。

実装例(サンプル)のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

まとめて読み込む場合
<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>
個別に読み込む場合
<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>

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-ui-slider' ) . slider( {
        range: true,
        values: [ 1001, 3000 ],
        min: 0,
        max: 10000,
        slide: function( event, ui ) {
            jQuery( '#jquery-ui-slider-values' ) . val( ui.values[ 0 ] + ' ~ ' + ui.values[ 1 ] );
        }
    } );
    jQuery( '#jquery-ui-slider-values' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'values', 0 ) + ' ~ ' + jQuery( '#jquery-ui-slider' ) . slider( 'values', 1 ) );
} );
// -->
</script>
解説
  • range: 範囲の間のトラックの色を変えるなど、スタイルに関するオプション。
  • values: jQuery UI の Slider プラグインの初期値の範囲を設定するオプション。
  • min: jQuery UI の Slider プラグインの最小値を設定するオプション。
  • max: jQuery UI の Slider プラグインの最大値を設定するオプション。

CSS

<style>
<!--
#jquery-ui-slider-values {
    border: 0;
    color: red !important;
    font-weight: bold;
    background-color: transparent;
    margin: 5px;
}
#jquery-ui-slider {
    margin: 0 10px;
}
-->
</style>

HTML

<p>範囲:<input type="text" id="jquery-ui-slider-values" /></p>
<div id="jquery-ui-slider"></div>

スポンサード リンク

カテゴリー: GUI, JavaScript, jQuery, jQuery UI, Slider パーマリンク