スライダー上のクリックした場所へハンドルをアニメーション移動

jQuery UI の Slider プラグインを使ったスライダーにおいて、トラック上のクリックした場所へ、ハンドルを、アニメーション動作で移動させる方法。animate オプションの値に「slow」「normal」「fast」のいづれかを指定する。「slow」はゆっくりとした速度のアニメーション動作、「fast」は早い速度、「normal」はその中間の速度。

実装例(サンプル)

評価:

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

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

  • 初期値: 50
  • 最小値: 0
  • 最大値: 100

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

  • スライダー中央の四角のハンドルをドラックして、トラック上を移動させることができる。
  • トラック上をクリックすると、ハンドルを、その場所へ、アニメーション動作で、移動させることができる。
  • ハンドルの左側をグレーに着色する。
  • スライダーに合わせて、「評価:」の右横の点数が変化する。

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

読み込み

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

まとめて読み込む場合
<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( {
        animate: 'slow',
        range: 'min',
        value: 50,
        min: 0,
        max: 100,
        slide: function( event, ui ) {
            jQuery( '#jquery-ui-slider-value' ) . val( ui.value + '点' );
        }
    } );
    jQuery( '#jquery-ui-slider-value' ) . val( jQuery( '#jquery-ui-slider' ) . slider( 'value' ) + '点' );
} );
// -->
</script>
解説
  • animate: トラック上のクリックした場所へ、ハンドルを、アニメーション動作で移動させるオプション。「slow」を設定すると、ゆっくりとした速度のアニメーション動作で移動する。
  • range: ハンドルの位置に応じて、トラックの色を変更するオプション。「min」を設定すると、ハンドルの位置の数値より小さい方のトラックを着色する。
  • value: jQuery UI の Slider プラグインの初期値を設定するオプション。
  • min: jQuery UI の Slider プラグインの最小値を設定するオプション。
  • max: jQuery UI の Slider プラグインの最大値を設定するオプション。

CSS

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

HTML

<p>評価:<input type="text" id="jquery-ui-slider-value" /></p>
<div id="jquery-ui-slider"></div>

スポンサード リンク

カテゴリー: GUI, JavaScript, jQuery, jQuery UI, Slider, アニメーション パーマリンク