ホーム > slide (全2件)
  • jQuery UIのSliderの値が変わった時(ドラッグ中:確定前)の処理を指定する

    スライダーの値が変わった時の処理を指定する。

    $( ".slider" ).slider( {
    	slide:function(event, ui) {
    		/* ui.valueに変更された値が格納されている */
    		alert( ui.value );
    	}
    } );
    

    ドラッグ中は値は確定しておらず、ui.value の値と slider( ‘value’ ) で取得できる値とは異なる場合がある。

  • jQuery UIのSliderを使う

    sliderクラスの要素にjQuery UIのSliderを適用させる。

    $( ".slider" ).slider( {
    	min: 0, /* default: 0 */
    	max: 5, /* default: 100 */
    	step: 1, /* defaut: 1 */
    	value: 0, /* default: 0 */
    	orientation: 'horizontal', /* default: 'horizontal' or 'vertical' */
    	slide:function(event, ui) { },
    	change:function(event, ui) { }
    } );
    
    <!-- html部分 -->
    <div id="slider1" class="slider"></div>
    

    minやmaxなどのプロパティ値に変数を指定する場合は、必ずparseInt関数で整数化すること。少なくとも1.8.20/21では、minが0より大きな値を取る場合の挙動がおかしくなる。