Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【HTML】初めてスライダー(<input type="range"/>)を使ってみました

 どうも!LSSです!!

 

今回はHTMLのフォームパーツで、今まで使った事がなかった「スライダー」を使ってみます。

 

 

こんなのです

 

コード

<input type="range" />

最低限のコードでいうとこうなります。

めっちゃシンプルですねw

 

 

呼び名はたくさんありますね

Androidにも、このコントロールはありました!

 

 かなーり懐かしい記事ですが、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

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^