Javascript Formular Berechnungen Ausgabe

Question

Ich habe ein Formular, das den Preis pro Quadratmeter der Decke berechnet. Und Ionenbereich Schieberegler als Eingabe, dann berechnet es Preis und gibt Daten an die Eingänge. Aber ich muss Eingaben mit span oder div ändern. Irgendwelche Vorschläge?

Hier ist die 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> 

und hier können Sie finden, wie es http://jsfiddle.net/khvoroffski/50apyyr5/

Answer 1

machen funktioniert Bitte einen guten Blick auf dieses Beispiel habe ich Ihnen Func Sie Design (CSS) zu machen.

/*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>