I am trying to write a calculator for price estimation
so that :
for 1000 MTU price will be 0.035 so total will become 35 for 2000 MTU price will be 0.034 total will become 67 for 3000 MTU price will be .0329 total will become 98.79
and so on….
I write the following code but its giving NaN error.
Any new suggestion to write a efficient code will be appreciated.
JavaScript
x
8
1
<p id= "rangeValue" >
2
3
</p>
4
<div class="range-wrap">
5
<div class="range-value" id="rangeV"></div>
6
<input id="myinput" type="range" name="points" min="1000" max="100000" value="1000" oninput="rangeValue.innerText = this.value" >
7
</div>
8
JavaScript
1
50
50
1
const slider = document.getElementById("myinput")
2
const min = slider.min
3
const max = slider.max
4
const value = slider.value
5
6
slider.style.background = `linear-gradient(to right, #0080FF 0%, #0080FF ${(value-min)/(max-min)*100}%, #596680 ${(value-min)/(max-min)*100}%, #596680 100%)`
7
8
slider.oninput = function() {
9
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%)`
10
};
11
12
13
// Add a change event listener to the range slider
14
slider.addEventListener('change', function() {
15
// Get the value of the range slider
16
var value = this.value;
17
var container = document.querySelector('#rangeValue');
18
19
let cost;
20
function calculateCost(value) {
21
if (value === 1000) {
22
cost = 0.0350;
23
} else if (value === 2000) {
24
cost = 0.0340;
25
} else {
26
cost = 0;
27
}
28
return cost;
29
}
30
var totval=value * cost;
31
totval = totval.toFixed(2);
32
33
container.innerHTML = totval;
34
// Print the value to the console
35
// console.log(value);
36
});
37
38
const
39
range = document.getElementById('myinput'),
40
rangeV = document.getElementById('rangeV'),
41
setValue = ()=>{
42
const
43
newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ),
44
newPosition = 10 - (newValue * 0.2);
45
rangeV.innerHTML = `<span>${range.value}</span>`;
46
rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
47
};
48
document.addEventListener("DOMContentLoaded", setValue);
49
range.addEventListener('input', setValue);
50
JavaScript
1
51
51
1
#myinput {
2
border-radius: 8px;
3
height: 8px;
4
width: 100%;
5
outline: none;
6
-webkit-appearance: none;
7
}
8
9
input[type='range']::-webkit-slider-thumb {
10
11
-webkit-appearance: none;
12
width: 20px;
13
height: 20px;
14
border-radius: 50%;
15
background: #0080FF;
16
}
17
18
19
.range-wrap{
20
width: 500px;
21
position: relative;
22
}
23
.range-value{
24
position: absolute;
25
top: 150%;
26
}
27
.range-value span{
28
width: 30px;
29
height: 24px;
30
line-height: 24px;
31
text-align: center;
32
background: transparent;
33
color: #0A0E1C;
34
font-size: 20px;
35
display: block;
36
position: absolute;
37
left: 50%;
38
transform: translate(-50%, 0);
39
border-radius: 6px;
40
}
41
.range-value span:before{
42
content: "";
43
position: absolute;
44
width: 0;
45
height: 0;
46
top: 100%;
47
left: 50%;
48
margin-left: -5px;
49
margin-top: -1px;
50
}```
51
Advertisement
Answer
Use parseInt()
to convert input value
from string
to integer
, so you can calculate your prices.
Other than that You are using a function calculateCost()
inside your event listener, I correct this in the code, so this is the result:
JavaScript
1
46
46
1
const slider = document.getElementById("myinput")
2
const min = parseInt(slider.min)
3
const max = parseInt(slider.max)
4
const value = parseInt(slider.value)
5
6
slider.style.background = `linear-gradient(to right, #0080FF 0%, #0080FF ${(value-min)/(max-min)*100}%, #596680 ${(value-min)/(max-min)*100}%, #596680 100%)`
7
8
slider.oninput = function() {
9
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%)`
10
};
11
12
13
// Add a change event listener to the range slider
14
slider.addEventListener('change', function() {
15
// Get the value of the range slider
16
var value = parseInt(this.value);
17
var container = document.querySelector('#rangeValue');
18
19
let cost;
20
if (value === 1000) {
21
cost = 0.0350;
22
} else if (value === 2000) {
23
cost = 0.0340;
24
} else {
25
cost = 0;
26
}
27
var totval=value * cost;
28
totval = totval.toFixed(2);
29
30
container.innerHTML = totval;
31
// Print the value to the console
32
// console.log(value);
33
});
34
35
const
36
range = document.getElementById('myinput'),
37
rangeV = document.getElementById('rangeV'),
38
setValue = ()=>{
39
const
40
newValue = Number( (range.value - range.min) * 100 / (range.max - range.min) ),
41
newPosition = 10 - (newValue * 0.2);
42
rangeV.innerHTML = `<span>${range.value}</span>`;
43
rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
44
};
45
document.addEventListener("DOMContentLoaded", setValue);
46
range.addEventListener('input', setValue);
JavaScript
1
50
50
1
#myinput {
2
border-radius: 8px;
3
height: 8px;
4
width: 100%;
5
outline: none;
6
-webkit-appearance: none;
7
}
8
9
input[type='range']::-webkit-slider-thumb {
10
11
-webkit-appearance: none;
12
width: 20px;
13
height: 20px;
14
border-radius: 50%;
15
background: #0080FF;
16
}
17
18
19
.range-wrap{
20
width: 500px;
21
position: relative;
22
}
23
.range-value{
24
position: absolute;
25
top: 150%;
26
}
27
.range-value span{
28
width: 30px;
29
height: 24px;
30
line-height: 24px;
31
text-align: center;
32
background: transparent;
33
color: #0A0E1C;
34
font-size: 20px;
35
display: block;
36
position: absolute;
37
left: 50%;
38
transform: translate(-50%, 0);
39
border-radius: 6px;
40
}
41
.range-value span:before{
42
content: "";
43
position: absolute;
44
width: 0;
45
height: 0;
46
top: 100%;
47
left: 50%;
48
margin-left: -5px;
49
margin-top: -1px;
50
}
JavaScript
1
6
1
<p id= "rangeValue" >
2
</p>
3
<div class="range-wrap">
4
<div class="range-value" id="rangeV"></div>
5
<input id="myinput" type="range" name="points" min="1000" max="100000" value="1000" oninput="rangeValue.innerText = this.value" >
6
</div>