<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
</html>
<script type="text/javascript">
var start = new Date(2021, 0, 25, 15, 00);
var now = new Date();
var diff = Math.abs(now.getTime() - start.getTime());
var end = start.getTime() + 7257600000;
console.log(start, "\n", new Date(end));
var range = document.createElement("input");
range.type = "range";
range.min = "0";
range.max = "7257600000";
range.value = diff;
range.className = "slider";
range.style = "position:absolute;top:0;left:0;transform-origin:0 100%";
document.body.appendChild(range);
var screenDim = Math.sqrt(
window.innerHeight * window.innerHeight +
window.innerWidth * window.innerWidth
);
document.querySelector("input").style.width = screenDim + "px";
var deg = window.innerHeight / screenDim;
console.log(window.innerHeight, window.innerWidth, deg);
document.querySelector("input").style.transform = "rotate(" + 60.7 + "deg)";
</script>
<style type="text/css">
.slider {
-webkit-appearance: none;
height: 4px;
background: white;
outline: none;
-webkit-transition: 0.2s;
transition: opacity 0.2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: black;
cursor: pointer;
border: none;
border-radius: 0;
}
.slider::-moz-range-thumb {
width: 10px;
height: 5px;
background: black;
cursor: pointer;
border: none;
border-radius: 0;
}
body {
background: black;
}
</style>