JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="input">
  <svg viewBox="0 0 2 1" preserveAspectRatio="xMinYMid meet">
    <path d="M0,1 C.3633802276324187,1 .6366197723675813,0 1,0 1.3633802276324187,0 1.6366197723675813,1 2,1" fill="magenta" stroke="none" />
  </svg>

  <input type="range" value="1" min="0.1" max="2" step="0.001" />
</div>

CSS

html {
  background-color: #CCC;
}
body {
  
}
.input {
  position: relative;
}
.input svg {
   display: block;
   height: 100px;
   width: 100%;
}
input[type=range] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

JavaScript

const input = document.querySelector(".input");
const path = input.querySelector("svg path");
const range = input.querySelector("input[type=range]");
const sineK = 0.3633802276324187;
let inputWidth = 2;

function getInputWidth() {
	const { width, height } = input.getBoundingClientRect();
	inputWidth = width / height;
}

function updateInput(value) {
  let double = value * 2;
  let k = value * sineK;
  let x = 0;
  let d = "M0,1 C";
  while (x < inputWidth) {
  	d += `${x + k},1 ${x - k + value},0 ${x + value},0 ${x + k + value},0 ${x - k + double},1 ${x + double},1 `;
    x += double;
  }
  
  path.setAttribute("d", d);
}

range.addEventListener("input", (event) => {
	const value = parseFloat(event.target.value, 10);
  updateInput(value);
});

window.addEventListener("resize", getInputWidth);

getInputWidth();
updateInput(1);