Javascript form calculations output

Question

I have a form that calculates price per square meters of ceiling. And ion range slider as input, then it calculates price and outputs data to inputs. But I need to change inputs with span or div. Any suggestions?

Here is the html:

<form id="calc">
  <div id="1">

  <p> 
    <input id="rel"  oninput="
    var v = this.value; 
    this.form.new.value = isNaN(v) ? '' : (v * 450).toFixed (0); 
    var v = this.value; this.form.new2.value = isNaN(v) ? '' : (v * 650).toFixed (0)" 
    style="display: none;">
  </p>

  <p><p>
   <span  class="small">from </span>
<span class="new"></span>
   <input type="text" disabled="disabled" name="new" size="2" maxlength="4" value="0" >
    <span class="small">to </span><input type="text" disabled="disabled" name="new2" size="2" maxlength="4" value="0">
    <div class="result" id="result">

    </div>
  </p>

  </div>
</form>

and here you can find how it works http://jsfiddle.net/khvoroffski/50apyyr5/

Answer 1

Please make a good look at this example , I made you func you make design (css) .

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 10px;
      -webkit-appearance: none;
      background-color: #9a905d;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: #434343;
      box-shadow: -10px 0 0 0px #43e5f7;
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}

<script>

function E (ele) {return document.getElementById(ele)}
function CALC ( value_ ) {

    var SPAN = E("SliderValue")
    var FROM = E("FROM")
    var TO = E("TO")
    var currentValue = E("SliderValue")
    
    var WIDTH_OF_SLIDER = E("rel")
    
    var positionInfo = WIDTH_OF_SLIDER.getBoundingClientRect();
    var width_IN_PIX = positionInfo.width;

    FROM.value = isNaN(value_) ? '' : (value_ * 450).toFixed (0); 
    TO.value = isNaN(value_) ? '' : (value_ * 650).toFixed (0);
    
    currentValue.innerHTML = value_ + ""
    
    var COEFICIJENT =  width_IN_PIX / 100
   
    currentValue.style.left = ( value_ * COEFICIJENT ) + "px"
    
    
}
</script>

<form id="calc"
>
  <div id="1">

  <p> 
    <input id="rel"  
    oninput="CALC(this.value)"
    type="range"
    maxValue="50"
    minValue="5"
    value="0"
    step="1"
    style="width:100%;background-color:red;" >
    
  </p>

  
  
   <span  class="small" >from </span>
   <span id="SliderValue" style="position:absolute;left:0;" > </span>
   
   <input type="text"  id="FROM"  value="0" />
    <span class="small">to </span>
    <input type="text"   id="TO"  value="0"  />
    <div class="result" id="result" > </div>
    
 
  </div>
  
</form>