Как сделать progress для ползунка?

Question

[ArtStylle]

Я имею такой ползунок

Мне нужно сделать такой

Задача в том, чтобы ползунок оставлял после себя желтый фон, это видно на скрине выше. Так же, желательно сделать изминение цифр в зависимости от положения ползунка. Насколько знаю это можно сделать через tag progress. Но имею о нем слабое представление, заранее спасибо.
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

[Максим Тимофеев]

Нужно верстать отдельно блок. Замахаешься стилизовать кроссбраузерно input type="range".

Comments

[Монти Пайтон]

у тайпранга есть же какоето апи наверное, или ничего там вообще нету?

[Максим Тимофеев]

Есть, но весьма скудное и со своими геморами в каждом браузере + вообще не поддерживается в 10%. Да и зачем если есть куча готовых и удобно стилизуемых js плагинов?

[Монти Пайтон]

Максим Тимофеев, думал что с ним та же история как и с кнопкам происходит, когда делают свою кнопку, а потом выясняется что кроме человека ничто не распознаёт это

[Монти Пайтон]

https://caniuse.com/#search=input%20type%3D%22range%22

[Максим Тимофеев]

Ostin1,

когда делают свою кнопку, а потом выясняется что кроме человека ничто не распознаёт это

не понял

А по поводу caniuse - вы проверьте стили, сам инпут нормально работает, а вот его стилизация без танца с бубном не получается