How to change the background color of pie slice with JavaScript?

Question

I'm trying to build a pie chart which dynamically change depending the value of range input.

This is what I've done so far: https://codepen.io/anon/pen/wqQLPy

const $slider = document.querySelector('input[type=range]');
const $line2 = document.querySelector('.line2');

$slider.addEventListener('input', handleChange);

function handleChange() {
  //$currrentValue.textContent = this.value;
  const degrees = 90 + ((this.value / 100) * 360);
  $line2.style.transform = `rotate(${degrees}deg)`;
}

.pie {
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid white;
  position: relative;
  background: #ffc600;
  overflow: hidden;
}

.line {
  width: 50%;
  height: 2px;
  background: #555;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all .2s linear;
}

.line2 {
  transform: rotate(180deg);
  /* When input value is 25 (default) */
}

<input type="range" min="0" max="100" value="25">

<div class="pie">
  <div class="line line1"></div>
  <div class="line line2"></div>
</div>

My question is - how to set a different background color to the slice (area between two lines)?

Example:

Answer 1

It's better to use svg for this stuff try that

const $slider = document.querySelector('input[type=range]');
const $currrentValue = document.querySelector('.current-value');
const $circle = document.querySelector('.circle');

$slider.addEventListener('input', handleChange);

function handleChange() {
  
    $currrentValue.textContent = this.value;

    const degrees = this.value;

    $circle.style = 'stroke-dasharray:'+degrees+' 150';
}

body {
  text-align: center;
  font-size: 2em;
}

input {
    width: 300px;
    max-width: 80%;
}

input:hover {
  cursor: pointer;
}

.current-value {
    position: relative;
    top: -30px;
    left: -7px;
    font-weight: bold;
}

.pie{
  border-radius: 50%;
}

.pie circle {
  fill: yellow;
  stroke: red;
  stroke-width: 30;
}

<p>0 <input type="range" min="0" max="100" value="25"> 100</p>
<p class="current-value">25</p>

<div style="margin:0 auto ;width:100px; height: 100px;">
<svg class="pie" viewBox="0 0 30 30">
<circle r="15" cx="15" cy="15" transform="rotate(45,15,15)" />
  <circle class="circle"  style="stroke-dasharray: 10.5 150;" r="15" cx="15" cy="15" />

</svg>
</div>