I really need some assistance in making this range slider produce multiple outputs. I've attempted a few different options, but unfortunately, I haven't been able to figure it out.
My goal is to have the text "590" display as 5.9 times the value of the slider with commas for numbers in thousands and the text "30,000" to show as 300 times the slider value also with commas.
[JSFiddle Demo]
var element = document.querySelector('input[type="range"]');
var updateRangeValue = function(){
var newValue = element.value;
var targetElement = document.querySelector('.value');
target.innerHTML = newValue;
}
element.addEventListener("input", updateRangeValue);@import url(https://fonts.googleapis.com/css?family=Work+Sans:300);
body {
font-family: "Work Sans", Helvetica, Arial, sans-serif;
color: #d7d7d7;
padding-top: 40px;
text-shadow: white 1px 1px 1px;
}
.value {
text-align: center;
font-weight: 300;
font-size: 10em;
width: 300px;
height: 100px;
line-height: 60px;
letter-spacing: -.03em;
margin: 40px auto;
}
input[type="range"] {
display: block;
-webkit-appearance: none;
background-color: #ffa842;
width: 300px;
height: 5px;
border-radius: 5px;
margin: 0 auto;
outline: 0;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #f5a623;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid white;
cursor: pointer;
transition: .3s ease-in-out;
}
input[type="range"]::-webkit-slider-thumb:hover {
background-color: white;
border: 2px solid #f5a623;
}
input[type="range"]::-webkit-slider-thumb:active {
transform: scale(1.6);
}<div class="value">100</div>
<input type="range" min="100" max="1000" step="10" value="100">
<br><br>
<strong><span class="perYear" id="perYear" style=" font-size: 70px; font-weight: 700; color: #ff9600;">590</span></strong>
<br><br>
<strong><span class="perTwentyFive" id="perTwentyFive" style=" font-size: 70px; font-weight: 700; color: #ff9600;">30,000</span></strong>