【jQuery UI】Sliderのオプション変更やイベントを取得をする方法

公開日: : JavaScript/jQuery, サイト制作

スポンサーリンク

jQuery UIを使ってスライダー(トラックバー)を作ります。その際に起こるイベントとしてスライダー作成時と開始時、移動時、終了時のものがありますがそれらについて拾ってみました。こちらで使用したjQuery UIのバージョンは1.10.4です。

スライダーの設置

まずはスライダーを設置することだけを考えます。その前にjQuery UIをダウンロードしていないかたはこちら

jQuery UI本家ページより引用

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#slider" ).slider();
  });
  </script>
</head>
<body>
 
<div id="slider"></div>
  
</body>
</html>

jQuery UI(とjQuery)のjavascriptおよびcssのリンクは自分で設置したものに書き換えてください。「slider」のID名の付いたDIV要素にスライダーが生成されるようになっています。

この辺については本家の方をご覧になった方が有益かと思います。カラーピッカーなど色々なサンプルが用意されているので非常に参考になると思います。

プロパティやイベントの設定

とりあえずサンプルとして各イベントを作成してスライダーに変化が起きたらその値を「#slidervalue」に書き出す処理を作成しました。

javascript側

$(function() {
 $( "#slider" ).slider({
  max:255, //最大値
  min: 0, //最小値
  value: 128, //初期値
  step: 1, //幅
  //orientation: "vertical", //縦設置か横設置か

  slide: function( event, ui ) {
   $("#slidervalue").html("slider:"+ui.value);
  },
  create: function( event, ui ) {
   $("#slidervalue").html("create:"+$(this).slider( "value" ));
  },
  start: function( event, ui ){
   $("#slidervalue").html("start:"+ui.value);
  },
  stop: function( event, ui ) {
   $("#slidervalue").html("stop:"+ui.value);
  },
  change: function( event, ui ) {
   $("#slidervalue").html("change:"+ui.value);
  }
 });
 //ボタンを押したら値を100にする 
 $("#valueset").click(function(){
  $("#slider").slider("value",100);
 });
});

HTML側

<div id="slider"></div>
<div id="slidervalue"></div>

各イベントについては次のようになっています。

create : スライダー作成時
start : スライド開始時
slide : スライド時
change : スライドの値変更完了時
stop : スライド終了時

各イベントの引数は(event,ui)で、二つ目のuiオブジェクトのvalueプロパティにスライドの値が格納されています(ui.value)。ただし、createイベントについてはuiが空になっているため上記のサンプルのように自分で取得してくるしかないようです。

(※「stop」と「change」の明確な違いについては把握できませんでした。デバックしてみたところ基本的にはスライドが終了した時点でイベントが起き、「stop」→「change」の順で発生しているようでしたが、恐らくスライドしないで値を変更させてもイベントが起きるのが「change」なのだと思います)

また、主要プロパティについては以下のようになっています。

max : 最大値
min : 最小値
value : 初期値
step : ステップ幅

一応スライダーの値の取得についてはsliderメソッドの引数に”value”を入れることででき、変更についてはそれに加え第2引数に任意の値を入れることで可能です。

//スライダー値の取得
var val = $( "#slider" ).slider( "value" );
//スライダー値の変更
$( "#slider" ).slider( "value" , 100 );

スライダーの長さの指定

スライダーの長さ等についてはCSSをいじることで変更できます。

例)スライダーの長さを100pxにする

#slider{
 width: 100px;
}

デモ

上記のサンプルをそのまま設置しています。実際にいじって確認してください。

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

WordPressの記事内でJavaScriptを動かす

WordPressでは厄介なことにJavaScriptが動かない場合があります。この記事では動かない

記事を読む

monacaでWebサイトをアプリ化

monacaを使ってWebサイトをアプリ化するための叩き台としてのメモです。 Webサイトのア

記事を読む

【javascript】privateのメソッドからpublicなメンバを呼ぶ

javascriptでのクラス定義 javascriptではいわゆる正確なクラスは作れませんが、そ

記事を読む

PHPでページリロードをしようと思ったができなかったので

header("Location: ".$_SERVER); とすればページをリロードでき

記事を読む

人気記事・ランダム記事等紹介の忍者レコメンドが大幅にパワーアップした件

以前このブログにて忍者レコメンドの紹介記事を書きました。その際にこのブログにも忍者レコメンドを設置し

記事を読む

ニコニコ動画のユーザーおよびマイリストのRSSフィード

ニコニコ動画のユーザーページのRSSフィードおよびマイリストのRSSフィードは次のようになっています

記事を読む

【HTML/CSS】タイトルロゴ画像の設定の方法

自分のブログやサイトのタイトル部分にトップ絵画像を設置する方法です。方法としてはimgタグをHTML

記事を読む

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

美人画像を表示してくれるブログパーツまとめ

美人時計など有名なものもありますが、美人画像を表示してくれるブログパーツをまとめました。暦や時刻を表

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑