I am currently working on developing a price estimation calculator.
Here is the breakdown:
For 1000 MTU, the price will be 0.035, resulting in a total of 35. For 2000 MTU, the price will be 0.034, making the total 67. For 3000 MTU, the price will be 0.0329, with a total of 98.79.
And so forth...
I tried implementing the following code but encountered a NaN error.
Any new suggestions on how to write more efficient code would be greatly appreciated.
<p id= "rangeValue" >
</p>
<div class="range-wrap">
<div class="range-value" id="rangeV"></div>
<input id="myinput" type="range" name="points" min="1000" max="100000" value="1000" oninput="rangeValue.innerText = this.value" >
</div>
const slider = document.getElementById("myinput")
const min = slider.min
const max = slider.max
const value = slider.value
slider.style.background = `linear-gradient(to right, #0080FF 0%, #0080FF ${(value-min)/(max-min)*100}%, #596680 ${(value-min)/(max-min)*100}%, #596680 100%)`
slider.oninput = function() {
this.style.background = `linear-gradient(to right, #0080FF 0%, #0080FF ${(this.value-this.min)/(this.max-this.min)*100}%, #596680 ${(this.value-this.min)/(this.max-this.min)*100}%, #596680 100%)`
};
// Add a change event listener to the range slider
slider.addEventListener('change', function() {
// Get the value of the range slider
var value = this.value;
var container = document.querySelector('#rangeValue');
let cost;
function calculateCost(value) {
if (value === 1000) {
cost = 0.0350;
} else if (value === 2000) {
cost = 0.0340;
} else {
cost = 0;
}
return cost;
}
var totval=value * cost;
totval = totval.toFixed(2);
container.innerHTML = totval;
// Print the value to the console
// console.log(value);
});
const
range = document.getElementById('myinput'),
rangeV = document.getElementById('rangeV'),
setValue = ()=>{
const
newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ),
newPosition = 10 - (newValue * 0.2);
rangeV.innerHTML = `<span>${range.value}</span>`;
rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
};
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);
#myinput {
border-radius: 8px;
height: 8px;
width: 100%;
outline: none;
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #0080FF;
}
.range-wrap{
width: 500px;
position: relative;
}
.range-value{
position: absolute;
top: 150%;
}
.range-value span{
width: 30px;
height: 24px;
line-height: 24px;
text-align: center;
background: transparent;
color: #0A0E1C;
font-size: 20px;
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
border-radius: 6px;
}
.range-value span:before{
content: "";
position: absolute;
width: 0;
height: 0;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -1px;
}