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

関連記事

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

Twitterボタンをブログやサイトに設置するとき読み込みに時間がかかってしまって困るといったことや

記事を読む

【javascript】正規表現文字抽出簡易ツール

jQueryで作成した正規表現による文字抽出用スクリプトです。 (使い方) 「正規表

記事を読む

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

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

記事を読む

【jquery】iframe内のスクロールイベント設定とスクロール量取得

ページ内に設置したiframeのスクロールイベントおよびスクロール量を取得したかったのでメモ

記事を読む

PEARをレンタルサーバーにインストールする

共用レンタルサーバーにPEARをインストールしたときにてこずったところについてメモ。今回レンタルサー

記事を読む

javascriptで画像処理をする【HTML5】

HTML5でjavascriptを使って画像処理をしてみました。このページでは手始めにグレースケール

記事を読む

Google Maps JavaScript API v3でマップ上に線を引く

GoogleMapsAPIを使って地図上に線を引いたときに気を付けたことなどをメモしておきます。

記事を読む

javascriptにおけるfor文の書き方

1. for文とは ある条件が正しいときに処理を繰り返すというループを記述するための文です。 似

記事を読む

【PHP】Twitterのツイート数やはてぶ数を取得する

指定URLのTweet数の取得 Twitterでツイート数を取得するには指定のURLにアクセスする

記事を読む

【ImgToAA】画像をAA化するツール

指定の画像を読み込ませてAA化するツールです。サンプルはこちら。 (使い方) 画像ファイ

記事を読む

【Unity】他のスクリプトを一括で取得して有効化・無効化を制御する

Unityを使っていて他のスクリプトを一時的に停止させたいと思ったので

テレビの録画をPCやNASで共有する

今までテレビはテレビ用のモニターで見ればいいやと思っていたのですが、さ

【DeepLearning】物体検出手法のSSD(Keras版)を試す (Ubuntu14.04)

はやりのディープラーニングの物体検出手法の一つであるSSDのサンプルを

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

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

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

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

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

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

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

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

→もっと見る

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