JavaScript

Web上で動くタイマーを作る②スライダーを使用する

こんばんは!

今回はスライダーについて説明していきます。

第1回を見ていない方は、そちらから見ていただければ幸いです。

Web上で動くタイマーを作る①setIntervalを使う

また、4回までで完成するプログラムはこちらで動かすことができるので、確認してみてください。

スライダーの使い方

inputタグのrange属性を使用します。

1から10まで1ずつ区切られたスライダーのサンプルになります。

実行画面

最小値、最大値、増減値とデフォルトの値を設定しています。

スライダーの値が変更されるたびに関数を呼び出し、値を表示しています。

ドラッグ中も数値の表示をする

先ほどのプログラムではドラッグ中には数値の変更が表示されません。

イベントハンドラのoninputを使用することにより、入力がある度(今回で言うとスライダーの値が変更される度)に動作します。

timeというクラス名をもつ要素の中で、input, span要素を持つ初めの要素を取り出し、その値を表示しています。

実行結果

今回はこれで終わりです。

次回はボタンを追加してタイマー処理の関数を記述していきたいと思います。

Web上で動くタイマーを作る③ボタンと処理

 

参考:https://beiznotes.org/input-range-show-value/

 

-JavaScript

Copyright© 物を作る者 , 2020 All Rights Reserved.