javascript - noUiSlider custom formatting time with libLink -

The custom formatting plus, the Libilink of a time value in noUiSlider does not work as expected for me.

I want to use the slider in 24 hours format at a time (eg 17:32).

I also want to enter a valid time and updated the slider via libLink.

When I move the slider, the input time is updated correctly but it does not work in another way: enter a new time in the input and then ignore the input reset to the previous value Does.

If you have console The log function can be seen in HHMMtoMinutes () twice what is happening here?

  $ (document) .ready (function () {$ (". Slider "). NoUiSlider ({start: [" 07:30 "], Category: {'Min': 0 , 'Max': 24 * 60}, format: {to: minutesToHHMM, from: HHMMTI}} $ (". Slider") link ("bottom"). ($ ("Pahar"));); Function mintohhmmm (value) {value = Math.round (value); Var hours = Math.flur (value / 60); Var Min = Value - Hour * 60; //console.log("value: "+ value +" thour: "+ hour +" \ tmin: "+ min) returns (" 0 "+ hours) .sis (-2) +": "+ (" 0 "+ minutes) .sis (-2); } Function HHMMtoMinutes (value) {var split = value.toString (). Split (":"); Var hour = parseInt (partition [0]) * 60; Var min = parseInt (partition [1]); //console.log ("value:" + value + "\ thour:" + hour + "\ tmin" + minute); Return hours + minutes; }  

  & lt; Link href = "https://refreshless.com/nouislider/source/distribute/Jquery.nouislider.min.css" rel = "stylesheet" /> & Lt; Script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "https://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js" & gt; & Lt; / Script & gt; & Lt; Div style = "width: 80%; margin: 80px 0 100px" & gt; & Lt; Div class = "slider" & gt; & Lt; / Div & gt; & Lt; Form style = "margin-top: 20px" & gt; & Lt; Label = "time" & gt; Time & lt; / Label & gt; & Lt; Input type = "text" id = "time" name = "time" /> & Lt; / Form & gt; & Lt; / Div & gt; There is also a JSFiddle:   
 
    = "Text"> 
 It runs twice because the method to update  libLink  slider  .val ()  Setting up the formatting on a link resolves your issue. 
 
  $ (". Slider"). NoUiSlider ({start: [0], category: {'min': 0, 'max': 24 * 60}}); $ (". Slider") Link ("Bottom") ($ ("# Time"), blank, {to: minutesToHHMM, from: HHMMtuminas});  
 
.