How to make progress for the slider?

Question

css

I have such a slider

. I need to do this.

The task is for the slider to leave behind a yellow background, this can be seen in the screenshot above. Also, it is desirable to change the numbers depending on the position of the slider. As far as I know, this can be done through tag progress. But I have little idea about him, thanks in advance.
HTML

<div class="lf_q_item lf_q_item_3"> 						
  <div class="lf_q_item_3-text">
  <p>Минимальная сумма кредита</p>
  <span>320 000 рублей</span>
  </div>
  <input type="range" value="1" min="0" max="100" step="1">
        </div>

input[type=range]::-webkit-slider-runnable-track 
  height: 8px
  cursor: pointer
  animate: 0.2s
  margin-bottom: -20px
  border-bottom-left-radius: 8px
  border-bottom-right-radius: 8px


/* Бегунок в Хроме */

input[type=range]::-webkit-slider-thumb 
  border: 3px solid #FFDD2D
  height: 25px
  width: 25px
  border-radius: 60%
  background: #ffffff
  cursor: pointer
  -webkit-appearance: none
  margin-top: -9px
  position: relative

Answer 1

You need to create a separate block. Waving to style cross-browser input type="range".