$(document).ready(function(){
$('#range-yellow').range({
min: 100,
max: 1000,
start: 200,
onChange: function(value) {
$('#display-3').html(value);
}
});
});
var savingsCoins = +$('#savingsCoins').text().split("$")[0];
var savingsMonthly = +$('#savingsMonthly').text();
var savingsGains = +$('#savingsGains').text();
$('.range-input').on('.range-input', function() {
var energyBill = +$('#energyBill').val();
$('#range-value').text(energyBill);
$('#savingsMonthly').text(savingsMonthly / energyBill);
$('#savingsCoins').text(savingsCoins / energyBill + "$");
$('#savingsGains').text(savingsGains / energyBill);
});
<script src="https://tyleryasaka.github.io/semantic-ui-range/range.js"></script>
<link href="https://tyleryasaka.github.io/semantic-ui-range/range.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="range-conin-wrapper">
<div class="range-coin">
<div class="range-input">
<div class="ui yellow range" id="range-yellow"></div>
</div>
<div class="range-price">
<div class="range-price-item">
<p>
Value: <span id="display-3"></span>
</p>
<h4>Первое значение</h4>
<p id="savingsCoins">0.12$</p>
</div>
<div class="range-price-item">
<h4>просто цифры</h4>
<p id="savingsYearly">907,929,000</p>
</div>
<div class="range-price-item">
<h4>Ззначение с инупута</h4>
<div class="range-price-item-footer">
<div class="icon-range-price-item">
<svg width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="10.2575" cy="9.41842" rx="9.92056" ry="9.15744" fill="#89EEAB"/>
<path d="M13.55 11.6347C13.55 9.9913 12.1281 9.56006 10.8344 9.25703V7.27568C11.4171 7.34561 12.0232 7.54375 12.6176 7.88174L13.2003 6.44818C12.5593 6.04025 11.7085 5.80715 10.8344 5.73722V4.46683H9.66886V5.76053C7.82737 5.97032 6.92994 7.03093 6.92994 8.26636C6.92994 9.93302 8.37516 10.3643 9.66886 10.6789V12.6253C8.8297 12.5437 7.99054 12.2291 7.40779 11.7978L6.76677 13.2197C7.40779 13.7209 8.51502 14.0822 9.66886 14.1521V15.4225H10.8344V14.1172C12.6642 13.8957 13.55 12.8468 13.55 11.6347ZM8.80639 8.17312C8.80639 7.7885 9.05115 7.45051 9.66886 7.31065V8.96566C9.15604 8.80249 8.80639 8.58104 8.80639 8.17312ZM10.8344 12.5787V10.9703C11.3355 11.1451 11.6735 11.3666 11.6735 11.7745C11.6735 12.1475 11.4171 12.4505 10.8344 12.5787Z" fill="#3F3F3F"/>
</svg>
</div>
<p id="savingsMonthly">20</p>
</div>
</div>
<div class="range-price-item">
<h4>Итоговое значение</h4>
<div class="range-price-item-footer">
<div class="icon-range-price-item"><svg width="26" height="20" viewBox="0 0 26 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.043 10.0037L11.2788 18.2141L1.36531 1.12966L21.1923 1.12966L19.1841 4.59055L19.8514 5.17083L22.3539 0.858109C22.5077 0.593166 22.3165 0.261232 22.0102 0.261232L0.547427 0.26123C0.241109 0.26123 0.0499504 0.593164 0.203688 0.858108L2.76703 5.27564L3.39141 4.65126L6.38676 9.78824L4.75845 8.70757L10.9351 19.352C11.0882 19.616 11.4694 19.616 11.6225 19.352L17.744 8.80265L17.7058 8.8683L16.043 10.0037Z" fill="#023047"/>
<circle cx="11.3697" cy="4.18729" r="2.0386" fill="#023047"/>
<path d="M3.84987 6.05109C3.9393 5.93708 4.07764 5.78219 4.26327 5.59806C4.64122 5.22316 5.19322 4.74875 5.87311 4.28029C7.24048 3.33815 9.07454 2.45455 11.0158 2.39868C13.4245 2.32934 16.1563 3.1863 18.8061 6.07513C15.9427 9.5835 12.6808 9.93353 11.0134 9.93508C9.11239 9.84244 7.28276 8.90605 5.90599 7.91446C5.22087 7.42102 4.6615 6.92364 4.27722 6.53168C4.08484 6.33546 3.94161 6.17102 3.84987 6.05109Z" stroke="#023047" stroke-width="0.942026"/>
<path d="M10.6028 11.6788C10.603 11.6288 10.6286 11.5824 10.6707 11.5554L11.8827 10.7809C11.9813 10.718 12.1103 10.7895 12.1092 10.9064L12.0544 16.5163C12.0536 16.597 11.9879 16.662 11.9072 16.662H10.7289C10.6473 16.662 10.5813 16.5957 10.5817 16.5142L10.6028 11.6788Z" fill="#023047"/>
</svg> </div>
<p id="savingsGains">13.048</p>
</div>
</div>
<button>Купить</button>
</div>
</div>
</div>
你能告诉我如何进行以下计算:
#savingsCoins / #range-price-item = savingsGains
难点在于获取输入范围的值并进一步与之交互
您的 html 没有带有
id="energyBill"
.PS 说的对:“来自输入的值”。