<div id="row">
<canvas width="300" height="300"></canvas>
  <div>
    <label>
      <input type="range" value="400" min="0" max="1000">
      <span></span>
    </label>
  </div>
</div>

#row {
  display: flex;
  align-items: center;
}
canvas {
  border: 1px solid #CCC;
  height: 100vh;
  max-height: 302px;
}

/**
 * для вопроса https://qna.habr.com/q/1240770
 * Как в цикле получить все точки вокруг заданной?
 */
const ctx = document.querySelector("canvas").getContext("2d");

const render = N => {
  // очистить
  ctx.clearRect(0, 0, 300, 300);
  
  ctx.strokeStyle = "#777";
  ctx.strokeWidth = 0.5;
  ctx.fillStyle = "#CCC";
  const R = 100;
  const center = {x: 150, y: 150 };
  const delta = 2 * Math.PI / N;

  for (let i = 0; i < N; i++) {
    const x = center.x + R * Math.cos(i * delta);
    const y = center.y + R * Math.sin(i * delta);
    
    // лучи
    ctx.beginPath();
    ctx.moveTo(center.x, center.x);
    ctx.lineTo(x, y);
    ctx.stroke();

    // точки
    ctx.beginPath();
    ctx.arc(x, y, 3, 0, 2 * Math.PI);
    ctx.fill();
  }
};
const span = document.querySelector('span');
const slider = document.querySelector('input');
slider.addEventListener('input', ({ target }) => update(target.value));

const update = v => {
  // линейный слайдер - в кубическую параболу
  const n = Math.floor(1 + Math.pow(v, 3) * 359 / 1e9);
  span.innerText = n;
  render(n);  
};

update(slider.value);