JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="boxbox">
<div class="line2"></div>
<div class="line3"></div>
  <div class="scrub-bar">
    <div class="progress-bar inline"></div>
    <div class="progress-bar-after inline">date</div>
  </div>
</div>

<div class="percentage"></div>

<div class="line-container">
  <div class="line"></div>
</div>

  <div class="line"></div>

CSS

.inline {
  display: inline-block;
}
.scrub-bar {
  width: 640px;
  height: 100%;
  position: relative;
}

.progress-bar {
  height: 100%;
  border-right: 2px solid red;
  width: 0;
}
.progress-bar-after {
    margin-left: -39px;
    top: -135px;
    font-size: 28px;
    color: red;
    background: #eee;
    padding: 0px 10px;
    position: relative;
    transform: rotate(-90deg);
}
.percentage {
  margin-top: 10px;
  font-weight: bold;
}

.boxbox {
  height: 480px;
  width: 640px;
  border: 2px solid #ddd;
  overflow: hidden;
  position: relative;
}
.line-container {
    width: 200px;
    height: 200px;
    position: absolute;
    background: grey;
    border-radius: 200px;
}

.line {
    width: 2px;
    height: 100px;
    background-color: white;
    position: absolute;
    transform-origin: top left;
    margin: 100px 0px 0px 100px;
}
.line2 {
    width: 1px;
    height: 999px;
    background-color: black;
    position: absolute;
    transform-origin: top left;
}
.line3 {
    width: 1px;
    height: 999px;
    background-color: black;
    position: absolute;
    transform-origin: top left;
    margin-top: 480px;
}

JavaScript

$(document).ready(function() {
  var scrubBar = $('.scrub-bar');
  var progressBar = $('.progress-bar');
  var percentage = $('.percentage');
  var storedValue = 50; // Starting position set to 50%
  var line = $('.line');
  var line2 = $('.line2');
  var line3 = $('.line3');

  updateProgressBar(storedValue);
  rotateLine(storedValue);
  rotateLine2(storedValue);
  rotateLine3(storedValue);

  scrubBar.on('mousedown', function(event) {
    var barWidth = scrubBar.width();

    $(document).on('mousemove', function(event) {
      var offsetX = Math.max(0, Math.min(event.offsetX, barWidth));
      var percent = (offsetX / barWidth) * 100;

      updateProgressBar(percent);
      rotateLine(percent);
      rotateLine2(percent);
      rotateLine3(percent);
      
      storedValue = percent; // Store the scrubbed value
    });
  });

  $(document).on('mouseup', function() {
    $(document).off('mousemove');
  });

  function updateProgressBar(percent) {
    progressBar.width(percent + '%');
    percentage.text(percent.toFixed(2) + '%');
  }

  function rotateLine(percent) {
    var rotation = (percent / 100) * -180 - 90;
    line.css('transform', 'rotate(' + rotation + 'deg)');
  }
  function rotateLine2(percent) {
    var rotation = (percent * 0.01) * -20 - 28;
    line2.css('transform', 'rotate(' + rotation + 'deg)');
  }
  function rotateLine3(percent) {
    var rotation = (percent * 0.01) * 20 - 152;
    line3.css('transform', 'rotate(' + rotation + 'deg)');
  }
});