jQueryUI 時間スライダーの作り方

Question

24時間幅を持ったスライダーを導入する必要が出ました。

そこでjQueryUIスライダーを使いたいと考えています。

以下のコードを書きました。

`

<script type="text/javascript"> $(function() { $(".slider-range").slider({ range: true, min: 0, max: 23.59, step: 0.15 }); }); </script>

`
01:00 - 01:59 というような幅にしたいです。

ドットではなく、コロンを使うにはどうしたらいいでしょうか?

また、幅が59を超えて05:85というようになってしまいました。
どなたかアドバイスしてくれる方はいませんか?

宜しくお願いします！

Answer 1

こんなのはどうでしょうか？
`
$(function() {
$(".slider-range").slider({
range: true,
min: 0,
max: 1440,
step: 15,
slide: function(e, ui) {
var hours = Math.floor(ui.value / 60);
var minutes = ui.value - (hours * 60);

        if(hours.length == 1) hours = '0' + hours;
        if(minutes.length == 1) minutes = '0' + minutes;

        $('#hoge').html(hours+':'+minutes);
    }
});

});
`

Comments

[gardeningojisan]

回答ありがとうございました！試してみようと思います！