以下を使用したモバイル Web アプリの開発:
- jquery1.7.1
- jquery-mobile 1.1.1
- レール 3.2.1
<span id="wake_up_time_display">ここでは、スライダーの値の変化に合わせて時間インジケーター ( ) の内容を変更するつもりでした。
以下は、対象の URL を直接呼び出した場合に機能します。
しかし、jQuery モバイルが表示される多くの場合<div data-role="page">、インジケータは変更されません。(スライダー自体の値が変わります。)
<label class="select" for="daily_record_wakeup_time">
    I'll wake up at: 
</label>
<span id="wake_up_time_display"> 6:00</span>
<input data-theme="e" data-track-theme="d" id="daily_record_wakeup_time" 
       max="480" min="240" name="daily_record[wakeup_time]" step="15" 
       type="range" value="360" />
<script>
    $("input[id='daily_record_wakeup_time']").live ("slidercreate", function () {
        $("input[id='daily_record_wakeup_time']").bind ("change", function (event) {
            $("#wake_up_time_display").text(Math.floor($(this).val() / 60) +
                    ":"+($(this).val() % 60 < 10 ? "0":"")+$(this).val() % 60);
        });
    });
</script>