I'm trying to write a calculator for price estimation

so:

The price for 1000 MTU will be 0.035, so the total will become 35 2000 MTU price will be 0.034 total will become 67 The price for 3000 MTU will be 0.0329 and the total will be 98.79

etc......

I wrote the following code but it gives NaN error.

Any new suggestions for writing 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;
}```