JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div id="obj"></div>
  <svg version="1.1" x="0px" y="0px" width="440.5px" height="147.2px" viewBox="0 0 440.5 147.2" enable-background="new 0 0 440.5 147.2" xml:space="preserve">
    <path id="path" fill="none" stroke="#000000" stroke-width="2.8243" stroke-miterlimit="10" d="M1.3,78c0,0,74-172.3,198,0s240-38.3,240-38.3" />
  </svg>

  <input type="range" name="slider" id="slider" min="0" max="100" width="500">
  <input type="text" name="slider_val" size="3" id="slider_val">
</div>

CSS

body {
  margin: 5em;
}
#obj {
  background: blue;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  position: absolute;
  /* Align center */
  top:-10px;
  left: -10px;
  opacity: 0.5;
}

.container {
  width: 438px;
  margin: 0 auto;
  position: relative;
}
input[type="range"] {
  width: 400px; 
}

#obj.red { background: red; }
#obj.lime { background: lime; }
#obj.yellow { background: yellow; }

JavaScript

// For more info see:
// https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement

var path = document.getElementById('path');
var obj = document.getElementById('obj');
// Length of path
var pathLength = Math.floor(path.getTotalLength());

// Move obj element along path based on percentage of total length
function moveObj(prcnt) {
    prcnt = (prcnt * pathLength) / 100;

    // Get x and y values at a certain point in the line
    pt = path.getPointAtLength(prcnt);
    pt.x = Math.round(pt.x);
    pt.y = Math.round(pt.y);

    obj.style.webkitTransform = 'translate3d(' + pt.x + 'px,' + pt.y + 'px, 0)';
}

// Initialize
moveObj(0);

// Slider functionality
var sliderEl = document.getElementById('slider');
var sliderValEl = document.getElementById('slider_val');

sliderEl.addEventListener('mousemove', function() {
    sliderValEl.value = this.value;
    moveObj(sliderValEl.value);
});


var stop = [
  { pos: 10, ms: 700, className: 'red' },
  { pos: 30, ms: 1000, className: 'lime' },
  { pos: 55, ms: 2000, className: 'yellow' }
];

// Animation functionality
// Use request animation frame for better performance
// if you're doing a lot of animation
var animationTimer = false;

function animationHandler(prcnt) {
    moveObj(prcnt);
    sliderEl.value = prcnt;
    sliderValEl.value = prcnt;

    var s = stop.find(n => n.pos === prcnt);
    if (s && s.className) {
        obj.classList.add(s.className);
    }

    animationTimer = setTimeout(function () {
        if (s && s.className) {
            obj.classList.remove(s.className);
        }

        animationHandler(prcnt + 1);
    }, 200 + (s ? s.ms : 0));
}


if (animationTimer) {
    clearTimeout(animationTimer);
    animationTimer = false;
}
else {
    animationTimer = animationHandler(0);
}