HTMLのRangeで時間を単位としてみる

range で時間を単位としてみる

これまで html の range に触れたことがなかったので、すこし触ってみました。

<input type="range" id="myrange" step="1" min="0" max="10" value="5">

この例では、
step(メモリ一つの幅)を 1、
min(最小値)を 0、
max(最大値)を 10、
value(送信する値、ロード後の初期値) を 5 にしています。

この range の値を時間にしてみたのが以下のサンプルコードです。

<!doctype html>
<html lang="ja">
    <head>
        <title>Range Test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <body>
            
            <label><span id="current_time"></span><input type="range" id="t_range" step="60000" min="1467990000000" max="1468076400000" value="0" style="width: 100%;"></label>
            
            
            <script>
              (function(){
                
                //***変数定義***//
                  
                //開始と終わりの時間の Date オブジェクトを取得
                var start = new Date(2016, 7-1, 9, 0, 0, 0);
                var end = new Date(2016, 7-1, 10, 0, 0, 0);
                
                //DOM オブジェクトを取得
                var current_t = document.getElementById('current_time');
                var t_range = document.getElementById('t_range');
                
                  
                //**関数**//
                
                //span の innerHTML を初期化
                function initCurrentTime(){
                    current_t.innerHTML = tomyDateFormat(start.getTime());
                }
                
                //Range から時間を取得
                function getTimeFromRange(){
                    current_t.innerHTML = tomyDateFormat(t_range.value);
                }
                
                //ミリ秒から日時を取得
                function tomyDateFormat(time){
                    var date = new Date(Number(time));
                    var rv =
                        date.getFullYear() + '/' +
                        (date.getMonth() + 1) + '/' +
                        date.getDate() + ' ' +
                        date.toLocaleTimeString();
                    return rv;
                }
                  
                //***イベントハンドラをバインド***///
                t_range.addEventListener('change', function(){
                    getTimeFromRange();
                });
                
                //***初期化処理***//
                initCurrentTime();
                
               })();
               
                
            </script>
        </body>
    </head>
</html>

ブラウザによって若干動作が異なることに注意

上記のコードをchromeで動かしてみると特に問題ありませんでした。
しかし、firefox でテストすると、メモリをキーボードの左/右で動かしたときには、時刻が更新されませんでした。
おそらく、firefox の場合には、キーボードでメモリを動かした際には、changeイベントが発火していないようです。
setInterval などで、定期的に値を更新する必要そうでした。