JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="i">Info: <span class="info"></span></div>
<div class="a">Current value is <span class="val">loading...</span></div>
<input type="range" min="1" max="10" value="2" class="r">

JavaScript

const timeoutPromise = (func, duration) => {
	return new Promise((resolve, reject) => {
  	setTimeout(() => {
    	func();
      resolve();
    }, duration);
  });
};
$(document).ready(() => {
	$('.val').text($('.r').val());
  $('.info').text('changing value in 3 seconds');
	timeoutPromise(() => {
  	$('.r').val(7);
    $('.val').text($('.r').val());
    $('.info').text('changing value again in 3 seconds');
  }, 3000).then(() => {
  	timeoutPromise(() => {
    	$('.r').val(6);
    	$('.val').text($('.r').val());
    	$('.info').text('see it all works..');
    }, 3000)
  });
});