JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js"></script>
<link rel="stylesheet" href="https://refreshless.com/nouislider/source/distribute/jquery.nouislider.min.css">
<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>

JavaScript

$(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;
}