Как сделать range slider градиентом

function init(){

  let under = document.getElementById('under');
  let ztop = document.getElementById('ztop');
  let text = document.getElementById('text');

  let ctx1 = under.getContext('2d');
  let ctx2 = ztop.getContext('2d');

  w = under.width = ztop.width = window.innerWidth - 40;
  h = under.height = ztop.height = 80;

  let gradient = ctx1.createLinearGradient(0,0, w,0);

  gradient.addColorStop(0, 'lightblue');
  gradient.addColorStop(1, 'darkblue');

  ctx1.fillStyle = gradient;
  ctx1.fill(new Path2D(`M 20 37 L ${w - 20} 26 L ${w - 20} 40 L 20 40 z`));

  let points = [];
  let parags = document.querySelectorAll('#text p');

  for(let i=0; i < 3; i++){
    points.push(i*(w-20)/4 + 20);
    parags[i].style.cssText = `left: ${i*(w-20)/4 + 20}px; width: ${w/4 - 20}px;`;
  }
  points.push(w-20);
  parags[3].style.cssText = `left: ${w - w/4 - 5}px; width: ${w/4 - 20}px; text-align: right;`;


  ctx1.strokeStyle = 'lightgray';

  let arcX = 20;
  let arc;
  let clipRect;
  let movable = false;
  let delta = 0;

  ztop.addEventListener('mousedown', onDown);
  ztop.addEventListener('touchstart', onDown);

  ztop.addEventListener('mousemove', onMove);
  ztop.addEventListener('touchmove', onMove);

  document.addEventListener('mouseup', onUp);
  document.addEventListener('touchend', onUp);

  render();
  
  function onDown(e){
      let x = (!e.touches) ? e.offsetX : e.targetTouches[0].clientX - ztop.offsetLeft;
      let y = (!e.touches) ? e.offsetY : e.targetTouches[0].clientY - ztop.offsetTop;
      if(ctx1.isPointInPath(arc, x, y)){
          movable = true;
          delta = x - arcX;
      }     
  }
  
  function onMove(e){
      let x = !e.targetTouches ? e.offsetX : e.targetTouches[0].clientX - ztop.offsetLeft;
      if(movable){
          arcX = x + delta;
          render();
      }
  }
  
  function onUp(e){
      goTo(points.sort((a,b) => Math.abs(a - arcX) - Math.abs(b - arcX))[0]);
      movable = false;
      render();
  }

  function render(){

    ctx2.clearRect(0,0,w,h);

    ctx2.save();
    clipRect = new Path2D();
    clipRect.rect(arcX, 0, w, 40);
    ctx2.clip(clipRect);

    ctx2.fillStyle = 'lightgray';
    ctx2.fill(new Path2D(`M 20 36.8 L ${w - 20} 25.4 L ${w - 20} 40 L 20 40 z`));
    ctx2.restore();

    ctx2.save();
    ctx2.strokeStyle = '#ffffff';
    points.forEach(i => {
       ctx2.stroke(new Path2D(`M ${i} 10 l 0 30`));
    })
    ctx2.restore();

    ctx2.save();
    ctx2.strokeStyle = 'gray';
    ctx2.setLineDash([2,2]);
    points.forEach((p,i) => {
       ctx2.stroke(new Path2D(`M ${p} 10 l 0 ${27 - p/w*11}`));
    })
    ctx2.restore();


    arc = new Path2D();
    arc.arc(arcX, 52, 9, 0, 2 * Math.PI);
    ctx2.strokeStyle = 'lightgray';
    ctx2.stroke(arc);
  }

  function goTo(x){
      let dir = (x > arcX)? 1 : -1;
      let anim = setInterval(() => {
         arcX += dir*4;
         if((arcX - x)*dir >= 0){
            arcX = x;
            clearInterval(anim);
         }
         render();
      }, 20)

  }

}

init();

.therange {
  position: absolute;
  top: 80px;
  left: 20px;
}

#top {
  z-index: 1;
}

#text p {
  position: absolute;
  bottom: -10px;
  font-size: 12px;
}

<canvas id="under" class="therange"></canvas>
<canvas id="ztop" class="therange"></canvas>
<div id="text" class="therange">
<p>Не владею</p>
  <p>Использую готовые решения</p>
  <p>Использую готовые решения и умею переделывать</p>
  <p>Пишу сложный JS с нуля</p>
</div>

var levels = document.querySelector('.levels')
var progress = document.querySelector('.progress')
var knob = document.querySelector('.knob')

var levelsBox, knobBox, points, min, max

knob.addEventListener('mousedown', function(e) {
  e.preventDefault()

  window.addEventListener('mousemove', dragging)
  window.addEventListener('mouseup', drop)

  knob.style.transition = '0s'
  progress.style.transition = '0s'

  var knobBox = knob.getBoundingClientRect()
  // координата нажатия мыши относительно ручки
  var shift = e.x - knobBox.left;

  function dragging(e) {
    var x = 0

    // не даем выйти за границы
    if (e.x < min) x = min
    else if (e.x > max) x = max
    else x = e.x

    X = x - shift - levelsBox.left
    knob.style.transform = `translateX(${X}px) rotate(-45deg)`
    progress.style.width = X + knobBox.width / 2 + 'px'
  }

  function drop(e) {
    // ближайшее число в массиве точек к текущей координате ручки
    var closest = getClosest(X)

    knob.style.transition = '0.5s'
    progress.style.transition = '0.5s'

    // перемащаем к полученной ближайшей точке
    knob.style.transform = `
    	translateX(${closest - knobBox.width / 2.7}px)
    	rotate(-45deg)
     `
    progress.style.width = closest + 'px'

    window.removeEventListener('mousemove', dragging)
    window.removeEventListener('mousemove', drop)
  }
})

function getClosest(v) {
  return points.reduce((prev, curr) =>
    (Math.abs(curr - v) < Math.abs(prev - v) ? curr : prev)
  )
}

function init() {
  levelsBox = levels.getBoundingClientRect()
  knobBox = knob.getBoundingClientRect()

  /* ширина промежутков */
  points = [
    0,
    levelsBox.width * 0.2,
    levelsBox.width * 0.45,
    levelsBox.width
  ]

  min = levelsBox.left,
    max = levelsBox.right,

    // тут я поленился и при изменении размера окна просто обнуляются размеры
    knob.style.transform = `translateX(-${knobBox.width / 2.7}px) rotate(-45deg)`
  progress.style.width = 0
}

// при изменении ширины окна пересчитываем
// некоторые размеры для корректного отображения
window.onresize = init

init()

* {
  margin: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: sans-serif;
}

.levels {
  position: relative;
  width: 80%;
  display: flex;
}

.level {
  display: flex;
  flex-direction: column;
}

.level p {
  font-size: 1.8vw;
  height: 3vw;
  margin-bottom: 0.4vw;
  display: flex;
  align-items: flex-end;
}


/* черточка */

.level::after {
  content: '';
  height: 3vw;
  width: 1px;
  z-index: 1;
}


/* ширина промежутков */

.level:nth-child(1) {
  width: 20%;
}

.level:nth-child(2) {
  width: 25%;
}

.level:nth-child(3) {
  width: 30%;
}

.level:nth-child(4) {
  align-items: flex-end;
  width: 25%;
}


/* градиент на черточках */

.level:nth-child(1)::after {
  background: linear-gradient(0deg, white 0%, white 22%, #BDBDBD 22%, #BDBDBD 100%);
}

.level:nth-child(2)::after {
  background: linear-gradient(0deg, white 0%, white 30%, #BDBDBD 30%, #BDBDBD 100%);
}

.level:nth-child(3)::after {
  background: linear-gradient(0deg, white 0%, white 40%, #BDBDBD 40%, #BDBDBD 100%);
}

.level:nth-child(4)::after {
  background: linear-gradient(0deg, white 0%, white 62%, #BDBDBD 62%, #BDBDBD 100%);
}

.slider {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2vw;
  width: 100%;
  background-color: #BDBDBD;
  clip-path: polygon(0 65%, 100% 0, 100% 100%, 0% 100%);
}

.progress {
  height: 100%;
  background: linear-gradient(45deg, #D1C4E9 0%, #4527A0 100%);
}

.knob {
  position: absolute;
  bottom: -4vw;
  left: 0;
  width: 2.4vw;
  height: 2.4vw;
  border-radius: 50%;
  background-color: #FAFAFA;
  box-shadow: 0 0 0 1px #9E9E9E;
  border-radius: 50% 10% 50% 50%;
  z-index: 2;
}

<div class="levels">
  <div class="level">
    <p>не владею</p>
  </div>

  <div class="level">
    <p>использую готовые <br> решения
    </p>
  </div>

  <div class="level">
    <p>использую готовые решения <br> и умею переделывать</p>
  </div>

  <div class="level">
    <p>пишу сложный js с нуля</p>
  </div>

  <div class="slider">
    <div class="progress"></div>
  </div>

  <div class="knob"></div>
</div>