Как с помощью ползунка управлять наполняемостью цвета эллипса?

Question

Есть эллипс внутри которого указана цена, как на картинке ниже. Несколько вопросов с которыми не могу разобраться.

1. как добиться ровных краев (переходов цветов)
2. как с помощью ползунка управлять наполняемостью цветов
   (т.е. при увеличении числа у элипса полоса черная увеличивалась относительно желтой и наоборот).
3. и как выровнить текст по центру независимо от значения в контейнере?

Вот мой фидл

function range1() {
  var rng = document.getElementById('calculator-add-credit__range-1');
  var text = document.getElementsByClassName('calculator-add-credit__pie__text__amount')[0];
  var format = (rng.value + '').replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
  //amount.innerHTML = summ+" руб.";
  text.value = format + " руб.";
};
(function($) {
  "use strict"; // Start of use strict
  $(window).on('load', range1);
})(jQuery); // End of use strict

.calculator-add-credit__pie {
  position: relative;
  margin-top: 40px;
}
.calculator-add-credit__pie__circle {
  display: inline-block;
  text-align: center;
  margin: .5em;
  width: 346px;
  max-width: 100%;
  height: 346px;
  position: relative;
  border-radius: 50%;
  background-image: linear-gradient(75deg, #000 60%, #FEEC1C 40%);
}
.calculator-add-credit__pie__circle:after {
  border-radius: 50%;
  content: "";
  background: #F3F4F4;
  position: absolute;
  left: 12px;
  top: 12px;
  height: 324px;
  width: 324px;
  max-width: 100%;
}
.calculator-add-credit__pie__text {
  position: absolute;
  text-align: center;
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 0;
  top: calc(50% - 36.8px);
  left: calc(50% - 100px);
}
.calculator-add-credit__pie__text__amount {
  display: block;
  font-size: 33px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calculator-add-credit__pie">
  <div class="calculator-add-credit__pie__circle"></div>
  <p class="calculator-add-credit__pie__text">Ежемесячный платеж<span class="calculator-add-credit__pie__text__amount">169 400 руб.</span></p>
</div>
<input type="range" class="calculator-add-credit__range" min="100000" max="1000000" step="50000" oninput="range1()" value="169400" id="calculator-add-credit__range-1">