JSFiddle - React, Tailwind, and code Playground

by markusd1984

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <script
      src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"
      integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

<div class="slidecontainer">
  <input type="text" id="durationtimestamp" value="00:00" oninput="durationtimestamp(this.value)" required="required" style="width:35px;">
  
  <input type="range" min="0" max="480" value="0" class="durationslider" id="durationrange" oninput="durationslider(this.value)" style="width:200px;vertical-align:middle">
</div>

JavaScript

function durationslider(value) {

var hours = Math.floor(value / 60).toLocaleString('en-US', {
    minimumIntegerDigits: 2,
    //useGrouping: false
  });
  
var minutes = (value % 60).toLocaleString('en-US', {
    minimumIntegerDigits: 2,
    //useGrouping: false
  });

duration = hours+':'+minutes;
document.getElementById("durationtimestamp").value = duration;
}

var previnput = document.getElementById("durationtimestamp").innerHTML;

function durationtimestamp(value) {

var hours = Math.floor(value / 60).toLocaleString('en-US', {
    minimumIntegerDigits: 2,
    //useGrouping: false
  });
  
var minutes = (value % 60).toLocaleString('en-US', {
    minimumIntegerDigits: 2,
    //useGrouping: false
  });

var myduration = moment.duration(value).asMinutes().toString();
document.getElementById("durationrange").value = myduration;
input = document.getElementById("durationtimestamp");

 if(!/0[0-8]:[0-5][0-9]$/.test(value)){
    //input.value = null;
    input.value = previnput; 
    }
    else{
    previnput = value;
		}

}