1

カスタム書式と noUiSlider の時間値の libLink が期待どおりに機能しません。

スライダーを使用して、24 時間形式 (17:32 など) で時間を出力したいと考えています。

また、有効な時間を入力し、libLink を介してスライダーを更新したいと考えています。

スライダーを動かすと、入力の時間が正しく更新されます。ただし、その逆は機能しません。入力に新しい時間を入力してからフォーカスを外すと、入力が前の値にリセットされます。

関数 HHMMtoMinutes() で console.log のコメントを外すと、2 回起動することがわかります。ここで何が起きてるの？

$(document).ready(function() {

  $(".slider").noUiSlider({
    start: ["07:30"],
    range: {
      'min': 0,
      'max': 24 * 60
    },
    format: {
      to: minutesToHHMM,
      from: HHMMtoMinutes
    }
  });

  $(".slider").Link("lower").to($("#time"));

});

function minutesToHHMM(value) {
  value = Math.round(value);
  var hour = Math.floor(value / 60);
  var min = value - hour * 60;
  //console.log("value:" + value + "\thour: " + hour + "\tmin: " + min)
  return ("0" + hour).slice(-2) + ":" + ("0" + min).slice(-2);
}

function HHMMtoMinutes(value) {
  var split = value.toString().split(":");
  var hour = parseInt(split[0]) * 60;
  var min = parseInt(split[1]);
  //console.log("value: " + value + "\thour: " + hour + "\tmin " + min);
  return hour + min;
}
<link href="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js"></script>

<div style="width:80%; margin:80px 0 0 100px">
  <div class="slider"></div>
  <form style="margin-top:20px">
    <label for="time">time</label>
    <input type="text" id="time" name="time" />
  </form>
</div>

ここにも JSFiddle があります: https://jsfiddle.net/g42e6saf/2/

4

2 に答える 2

3

更新にはスライダーメソッドをlibLink 使用する必要があるため、2 回実行されます。.val()リンクのフォーマットを設定すると、問題が解決します。

$(".slider").noUiSlider({
    start: [ 0 ],
    range: {
        'min': 0,
        'max': 24 * 60
    }      
});

$(".slider").Link("lower").to($("#time"), null, {
    to: minutesToHHMM,
    from: HHMMtoMinutes
});

フィドルを更新しました。

于 2015-03-18T07:57:02.393 に答える
1

ドキュメントを見たところ、同じ問題があるように見えたので、これはバグでしょうか? （そして、もう一度調べたところ、現在は機能しています）とにかく、libLinkスクリプトを使用しない回避策がありますhttps://jsfiddle.net/q4s4xrL7/2/

$(document).ready(function () {
    var $time = $('#time'),
        $slider = $('.slider');

    $slider.noUiSlider({
        start: ["07:30"],
        range: {
            'min': 0,
                'max': 24 * 60 - 1 // and I've subtracted 1 to make the range stop at 23:29
        },
        format: {
            to: minutesToHHMM,
            from: HHMMtoMinutes
        }
    }).on({
        slide: updateInputValue
    });

    function minutesToHHMM(value) {
        value = Math.round(value);
        var hour = Math.floor(value / 60);
        var min = value - hour * 60;
        //console.log("value:" + value + "\thour: " + hour + "\tmin: " + min)
        return ("0" + hour).slice(-2) + ":" + ("0" + min).slice(-2);
    }

    function HHMMtoMinutes(value) {
        var split = value.toString().split(":");
        var hour = parseInt(split[0], 10) * 60;
        var min = parseInt(split[1], 10);
        //console.log("value: " + value + "\thour: " + hour + "\tmin " + min);
        return hour + min;
    }

    $time.change(function () {
        $slider.val($time.val());
    });

    function updateInputValue() {
        $time.val($slider.val());
    }

    // run when page first loads
    updateInputValue();
});
于 2015-03-17T18:08:21.010 に答える