Percent & Dollar inputs, linked to a Range Slider

index.html

<input id="examplePercent" type="tel" value="1250%" onblur="exampleSlide.value = this.value;exampleDollars.value = '$'+exampleSlide.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');examplePercent.value = exampleSlide.value+'%'">
<input id="exampleDollars" type="tel" value="$1,250" onblur="exampleSlide.value = this.value;examplePercent.value = exampleSlide.value+'%';exampleDollars.value = '$'+exampleSlide.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')">
<input id="exampleSlide" type="range" min="1" max="5000" value="1250" oninput="examplePercent.value = this.value+'%';exampleDollars.value = '$'+this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')">

Percent & Dollar inputs, linked to a Range Slider.markdown

Percent & Dollar inputs, linked to a Range Slider ('-' * 49) With thousands separator for the hundreds

A Pen by Tommy Hodgins on CodePen.

License.

script.js

var examplePercent = document.getElementById('examplePercent'),
    exampleDollars = document.getElementById('exampleDollars'),
    exampleSlide = document.getElementById('exampleSlide');

style.css

input {
 display: block;
 font-size: 200%;
 height: 50px;
 width: 100%;
 text-align: right;
}

input + input {
 margin-top: 10px; 
}