Calculate total price on different percentage for each increment-CodePudding

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.

<p id= "rangeValue" >

</p>
<div >
        <div  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;
}```

CodePudding user response：

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:

const slider = document.getElementById("myinput")
const min = parseInt(slider.min)
const max = parseInt(slider.max)
const value = parseInt(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 = parseInt(this.value);
  var container = document.querySelector('#rangeValue');

  let cost;
    if (value === 1000) {
      cost = 0.0350;
    } else if (value === 2000) {
      cost = 0.0340;
    } else {
      cost = 0;
    }
  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;
}

<p id= "rangeValue" >
</p>
<div >
<div  id="rangeV"></div>
<input id="myinput" type="range" name="points" min="1000" max="100000" value="1000" oninput="rangeValue.innerText = this.value" >
</div>