JavaScript でスライダーを作る方法

質問

JavaScript　を使ってブラウザー上でスライダーを表示し、ツマミをマウスで上下または左右にドラッグするとその位置情報を返すような関数を作りたいと思っています。縦方向に上下するスライダーだと横軸方向は固定値で、縦軸の座標をツマミが動く範囲内で取得したいのですが、Canvas 用の関数でそのようなものを作ることは可能でしょうか？
詳しい方がいらっしゃいましたら、どうか教えてください。お願いします。

回答No.1

fujillin · ベストアンサー

＞そのようなものを作ることは可能でしょうか？

可能ではないかと思います。
質問者様がどのくらい知識がおありなのかによつて難易度が変わってくると思いますが、canvasでないものはすでにいろいろと作られています。（canvasのものもあるかも知れません）

一方で、canvasの場合は描画図形が個別のオブジェクトにならなかったと記憶していますので、イベント処理に工夫が必要になりそうな気がします。

canvasではありませんが、ご参考までに、ライブラリの例と、作り方の解説サイトを…
（ぐぐれば他にもいろいろ見つかるはず）
http://www.noupe.com/javascript/30-javascriptajax-techniques-for-sliders-scrollers-and-scrollbars.html
http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0023
http://www.hcn.zaq.ne.jp/___/misc/slidebar.html

お礼

早速のご回答、そして詳しい紹介をいただき、ありがとうございます。
最初のサイトに行ってみました。英語のため多少骨が折れるとは思いますが、掲載されたソースコードをダウンロードしましたので、オブジェクト指向のJavaScriptでスライダーを作るテクニックを勉強してみたいと思います。

回答No.2

b0a0a

どんなものを作りたいのかよくわからないですができます

お礼

早速ご回答いただき、ありがとうございました。
作りたいものは、オシロスコープからサーバーにリアルタイムでアップロードされる観測信号のAD変換されたデータをAJAXで取り込み、ブラウザでバーチャルオシロスコープとして表示するルーチンですが、電圧波形のピークツーピーク（peak to peak)を測るために上下２本のカーソル線で電圧の最小値と最大値を挟む仕組みがほしかったのです。このカーソル線を動かすのに波形表示画面の横に垂直に立てられたスライダーが適していると思ったわけです。
第一回答者さんに教えていただいた英語のサイトにオブジェクト指向のJavaScript　で出来たスライダーのサンプルがありましたので、研究して自分でも作れるようになりたいと思ってますが、簡単な　”名前：値”　の構造を持ったオブジェクトくらいしか作ったことがないので、ちょっと時間がかかりそうです。
Canvas の関数を利用したサンプルなどご存知でしたら教えていただけるとありがたいです。