【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
  • このエントリーをはてなブックマークに追加

関連記事

指定URLのWebサイトの画面全体をキャプチャする方法

Webサイトのスクリーンショットを撮る方法としてはいくつかありますが、各方法ごとに調べたものを紹介し

記事を読む

monacaでWebサイトをアプリ化

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

記事を読む

【jQuery/javascript】はてなボタンを動的に設置する

はてなブックマークのボタンをページの読み込みが終わった後にjavascript(jQuery)で追加

記事を読む

【Three.js/jThree.js】カメラ内部パラメータを変更して視野などを変える

jThree.jsでカメラの内部パラメータを変更するのに手間取ったのでメモ。参考にしているjThre

記事を読む

FC2ブログからWordPressへの引っ越しについて

今までFC2ブログでメモを残していましたが、WordPressに移行することにしました。理由としては

記事を読む

関連記事を手軽に表示できるzenbackの導入方法

関連記事を手軽に表示できるZenbackというサービスの紹介です。 関連記事の表示を手助けして

記事を読む

ニコニコ動画のURLリンクから外部プレイヤーのスクリプトに正規表現で置換する

ニコニコ動画の動画のアドレスを抽出して外部プレイヤー貼りつけソースのスクリプトに変換するソースです。

記事を読む

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

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

記事を読む

livedoorblogのタグのページが404 Not Found

別のブログとしてライブドアのものを使っているのですが、タグを編集していた際に特定のタグ一

記事を読む

【javascript/jQuery】Progressbarで処理の進捗状況を表示する

jQuery UIでProgressbarを使う 処理経過を表示する場合プログレスバーにより提示さ

記事を読む

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

OpenCV3.1のTracking APIでトラッキングを試す

はじめに 先日OpenCV3.1をopencv_contrib付きで

パソコンを複数台使う際便利なツール

はじめに 先日、機械学習用にGPUを積んだBTOパソコンを購入しまし

OpenCV3.1をopencv_contrib付きでVisual Studio2013でビルドしてインストールする

はじめに OpenCV3.1でトラッキングがしたいと思いインストーラ

→もっと見る

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