Javascriptフォームの計算結果

Question

天井の平方メートルあたりの価格を計算するフォームがあります。 イオンレンジスライダを入力として、価格を計算し、データを入力に出力します。しかし、入力をspanまたはdivに変更する必要があります。助言がありますか？ここで

は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> 

、ここであなたはそれがhttp://jsfiddle.net/khvoroffski/50apyyr5/

Answer 1

をどのように機能するかを見つけることができます。この例をよく見てください、私はあなたがデザイン（CSS）を作るFUNCました。

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