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

関連記事

なるべく安くロリポップを申し込む方法

ロリポップというレンタルサーバーは元々比較的安く、よくキャンペーンなどで割引をやっているので安価にC

記事を読む

Windows7でVirtualBoxとVagrantを使ってローカル開発環境を構築する

Vagrant(ベイグラント)とは http://www.vagrantup.comで入手できる仮

記事を読む

【jQuery】サイドバー固定に役立つサイト集

縦スクロール 縦方向にスクロールして指定の位置に来たら要素を固定させる方法のリンク集を紹介させてい

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

関連記事を表示させるブログパーツOutbrainの導入方法

関連記事を表示させるブログパーツOutbrainの紹介です。 このOutbrainの長所は

記事を読む

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

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

記事を読む

さくらサーバーにフォルダをアップロードする方法

さくらサーバーにフォルダをアップロードする…という機能は無いみたいで個別にFTPソフトを使う必要があ

記事を読む

相互RSSサービスのまとめ

ブログやサイトを作ると相互RSSという名前を聞くことがあると思います。相互RSSとはざっくりいうと他

記事を読む

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 ↑