【HTML】初めてスライダー(<input type="range"/>)を使ってみました
どうも!LSSです!!
今回はHTMLのフォームパーツで、今まで使った事がなかった「スライダー」を使ってみます。
- こんなのです
- 呼び名はたくさんありますね
- フォームパーツなもので
- 横幅を広くする
- CSSでこのスライダーの値を利用したかった…けど無理っぽい^^;
- JavaScriptなら余裕!
- というわけで「スライダー」の紹介でした
こんなのです
コード
<input type="range" />
最低限のコードでいうとこうなります。
めっちゃシンプルですねw
呼び名はたくさんありますね
かなーり懐かしい記事ですが、Androidアプリ開発では「SeekBar」という名前がついていましたね。
HTMLタグ上では「range(レンジ)」という名前になっています。
Excelのセル範囲みたいな名前ですねw(VBA触ってる人にしか分からない話)
個人的には「スライダー」という呼び方がしっくりくる気がします。
フォームパーツなもので
ユーザーが「だいたいの量・割合」を選択して、サーバに送信する、というのが本来の用途なんでしょうね。
その際、サーバ側は「数値」で受け取る事になります。
といっても…
これのどこにも数字は書かれていないので、全く分からないのが難点w
ちなみに、左端が0で、右端が100、という事になっています。
この「数値」を変更する事もでき、
例えば、
<input type="range" min="0" max="255"/>
のように、min(最小値)とmax(最大値)を指定する事ができます。
…といっても、やっぱり数値が分からないので、見た目も全く変わらないですね^^;
あと、
<input type="range" min="0" max="255" value="20"/>
のように、valueを指定すると、最初のスライダーの位置が変わります!
横幅を広くする
まず、最初の状態では小さいので、横幅を最大まで伸ばしてみます。
こうするには、コードを
<input style="width: 100%;" type="range" />
こんな風に書きます。
style…CSSによる指定ですね。
CSSでこのスライダーの値を利用したかった…けど無理っぽい^^;
色々試みてみましたが…どうやら、CSSからスライダーの値を読み取る事はできないみたいです。
値は「value」なんですが、例えば
<style><!--
#rg:after{content:attr(value);}
--></style>
<input id="rg" style="width: 100%;" type="range" value="75" />
のようにコードを書いても、
右(after)にvalueの数字が出るようにしましたが、スライダーを動かしても初期値の「75」から変化しません。
JavaScriptなら余裕!
コード
<input id="rg2" style="width: 100%;" type="range" />
<div id="rg2v"> </div>
<script>
rg2.addEventListener('input',rg2i,false);
rg2i();
function rg2i(e){
rg2v.innerHTML=rg2.value;
}
</script>
とりあえず、単純に「スライダーが変更された時、スライダーの値を下に表示する」ものを作ってみると、こんな感じになります。
この場合、スライダーに「rg2」というidをつけているので、
rg2.value
で、その値を取り出せます。
「変更された時」を監視するために、
rg2.addEventListener('input',rg2i,false);
としています。
「input」だとツマミをぐりぐり動かしている最中でも、都度、イベント発生してくれるんですね^^
というわけで「スライダー」の紹介でした
今まで、JavaScriptを使用したツールをいくつか、公開してきました。
その中で+と-をクリックして調節するような場面が多々ありましたが…スライダーでやったほうがいいような物も多々あったように思いますねwww
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^