JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.2/roundslider.min.js"></script>
<div id="slider"></div>
<div id="time">
  <span id="hour">00:</span>
  <span id="minute">00</span>
</div>
<svg height="170" width="170" class="spinner__circle" shape-rendering="geometricPrecision" viewBox="0 0 170 170"><circle class="spinner__background" r="80" cx="85" cy="85" fill="transparent" style="stroke-dasharray: 502.655; stroke-dashoffset: 0; stroke-width: 10; stroke: rgb(232, 235, 237);"></circle><circle class="spinner__foreground" r="80" cx="85" cy="85" fill="transparent" style="stroke-dasharray: 502.655; stroke-dashoffset: 497.628; stroke-width: 10; stroke: rgb(64, 159, 255);"></circle></svg>

CSS

@import url('https://fonts.googleapis.com/css?family=Gugi');
body {
  margin: 0;
  background: url(https://picsum.photos/1200);
}
* {
  font-family: 'Gugi', cursive;
}
div#time {
  position: absolute;
  font-size: 40px;
  top: 234px;
  z-index: 99;
  left: 178px;
  font-size: 80px;
}
.rs-tooltip.rs-tooltip-text.edit {
  visibility: hidden;
}
div#slider {
  width: 566px !important;
  height: 566px !important;
}
.rs-container.full {
  width: 566px !important;
  height: 566px !important;
}
.rs-handle.rs-move {
  margin: -1.5px 0px 0px -3px !important;
  width: 12px !important;
  height: 12px !important;
  border: solid 3px white;
  background-color: #b3b3b1;
}
.rs-handle.rs-focus {
  margin: -1.5px 0px 0px -3px !important;
  width: 12px !important;
  height: 12px !important;
  border: solid 3px white;
  background-color: #b3b3b1;
}
.rs-block {
  /* padding: 5px !important; */
}

JavaScript

var hour = document.querySelector('#hour');
var minute = document.querySelector('#minute');
var slider = $("#slider").roundSlider({
 	sliderType: "min-range",
  width: 3,
  startAngle: 90,
	drag : function(e){
  	hour.innerHTML = Math.floor(e.value / 60) < 10 ? '0' +  Math.floor(e.value / 60) + ':' : Math.floor(e.value / 60) + ':';
  	minute.innerHTML = Math.floor(e.value % 60) < 10 ? '0' + Math.floor(e.value % 60) : Math.floor(e.value % 60);
  },
  change : function(e){
  	hour.innerHTML = Math.floor(e.value / 60) < 10 ? '0' +  Math.floor(e.value / 60) + ':' : Math.floor(e.value / 60) + ':';
    minute.innerHTML = Math.floor(e.value % 60) < 10 ? '0' + Math.floor(e.value % 60) : Math.floor(e.value % 60);
  },
  max : 1440
});