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

関連記事

TIG89_benchinikoshikakerujyosei500-thumb-500xauto-4230

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

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

記事を読む

1_129

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

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

記事を読む

git_fetch

【TortoiseGit】複数のリポジトリを統合する

やりたいこと 最近WindowsにTortoiseGitを導入してリポジトリを作ったり、履歴をプッ

記事を読む

nat12_se05500-thumb-500x753-2758

【javascript/jQuery】強制的にページをスクロールさせる方法

強制的にページをスクロールさせたいと思って調べていたのですが、なかなか思うようなものが見つからず困っ

記事を読む

RSS-Icon-Image

AmazonのランキングRSSから画像リンクを作る

Amazon RSS Amazonでいい感じのRSSが無いかと探していたのですが実は本家に素晴らし

記事を読む

jquery-icon

jQueryにおけるcreateElement

jQueryでcreateElementに変わる関数は単純で、例えばvar dom = docume

記事を読む

JS745_sumafodesakura-thumb-autox600-15200

monacaでWebサイトをアプリ化

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

記事を読む

jquery-icon

【HTML/jQuery UI】NumericUpDownを設置する【Spinner】

HTMLタグにNumericUpDownがないか探したのですがないみたいなのでそれが使えるようなもの

記事を読む

application-javascript

javascriptでチェックボックスを一括で変更する方法

チェックボックスのチェックに一つ一つチェックを入れていくのは非常に手間がかかるのでjavascrip

記事を読む

a8selfback1

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

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

記事を読む

encodingtype
【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

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

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

rssimage
【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

rssimage
フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

computer_server
格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

school_toshokan_hondana
kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

TAKEBE055122558_TP_V
寝る前にスマホを見ると斜視になる可能性とその対策

はじめに  寝る前などスマホを横になりながら見続けると斜視になる可能

→もっと見る

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