<div class="container">
  <div id="box" class="box"></div>
  <input type="range" id="rotate" name="rotate" min="0" max="360" />
  <p>開始角度:<span id="rotate-num"></span>°</p>
</div>

.container {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  width: 200px;
  margin: 24px auto 0;
}

.box {
  width: 200px;
  height: 200px;
  background-image: conic-gradient(
    rgb(0, 34, 255) 0%,
    rgb(0, 255, 242) 25%,
    rgb(255, 255, 255) 50%,
    rgb(0, 255, 242) 75%,
    rgb(0, 34, 255) 100%
  );
  background-size: 20px 20px;
}

const box = document.getElementById("box")
const slider = document.getElementById("rotate");
const rotateNum = document.getElementById("rotate-num");
rotateNum.innerHTML = slider.value;

slider.oninput = function() {
  rotateNum.innerHTML = this.value;
  box.style.cssText = `background-image: conic-gradient(from ${this.value}deg, rgb(0, 34, 255) 0%, rgb(0, 255, 242) 25%, rgb(255, 255, 255) 50%, rgb(0, 255, 242) 75%, rgb(0, 34, 255) 100%)`
}