Haloo, pada tutorial pertama saya ini, saya ingin membagikan cara membuat simple price calculator dengan input range (yang inputnya bisa digeser-geser itu lhooo :D ). Ceritanya ini mau buat grosir gula & beras online yang harganya ditampilkan pada web. Pembeli bisa melihat berapa biaya yang harus dia keluarkan untuk membeli gula dan/atau beras sekian Kg.
Seperti ini nih tampilannya :
Oke, pertama-tama kita buat input HTML-nya dulu.
<input type="range" min="0" max="100" value="0" step="1" oninput="updateTextInput(this.value);" id="input1" />
<output id="o1"></output>
Berhubung inputnya berbentuk bar (range) maka input type="range". Nilai minimal dari range ini adalah 0 dan maksimalnya 100. Lalu untuk setiap pergeseran ball-nya saya set 1 ( step="1" ). updateTextInput(this.value) adalah fungsi yang digunakan meng-update nilai input setiap terjadi perubahan input. Output berfungsi untuk mencantumkan nilai dari input.
Nah, untuk styling bar-nya seperti ini :
input[type='range'] {
width: 300px;
-webkit-appearance: none;
border-radius: 5px;
box-shadow: inset 0 0 5px #333;
background-color: #1c5de0;
height: 10px;
vertical-align: middle;
}
input[type='range']::-moz-range-track {
-moz-appearance: none;
border-radius: 5px;
box-shadow: inset 0 0 5px #333;
background-color: #1c5de0;
height: 10px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
border-radius: 20px;
background-color: #FFF;
box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
border: 1px solid #999;
height: 20px;
width: 20px;
}
input[type='range']::-moz-range-thumb {
-moz-appearance: none;
border-radius: 20px;
background-color: #FFF;
box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
border: 1px solid #999;
height: 20px;
width: 20px;
}
Setelah selesai membuat input range, sekarang giliran mainan javascript-nya untuk menampilkan nilai dari input dan menampilkan harganya.
Fungsi updateTextInput dan updateTot
function updateTextInput(val) {
harga = val * 8000;
document.getElementById('o1').value=val;
document.getElementById('price1').value=harga;
updateTot();
}
function updateTextInput2(val) {
harga = val * 9000;
document.getElementById('o2').value=val;
document.getElementById('price2').value=harga;
updateTot();
}
function updateTot(){
var h1 =parseFloat( document.getElementById("price1").value);
var h2 =parseFloat( document.getElementById("price2").value);
var Tot = h1 + h2;
document.getElementById("priceTot").value = Tot;
}
Fungsi updateTot() digunakan untuk menjumlahkan harga dari input1 dan input2. Harga total dari kedua input tersebut ikut berubah jika nilai input1 atau input2 berubah.
Untuk kode secara keseluruhannya seperti ini:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Price Calculator</title>
<style>
#content{
max-width:900px;
width:100%;
}
#left{
margin: 20px 15px 10px 10px;
float:left;
width:45%;
}
#right{
margin: 10px 15px 10px 10px;
float:right;
width:35%;
}
input[type='range'] {
width: 300px;
-webkit-appearance: none;
border-radius: 5px;
box-shadow: inset 0 0 5px #333;
background-color: #1c5de0;
height: 10px;
vertical-align: middle;
}
input[type='range']::-moz-range-track {
-moz-appearance: none;
border-radius: 5px;
box-shadow: inset 0 0 5px #333;
background-color: #1c5de0;
height: 10px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
border-radius: 20px;
background-color: #FFF;
box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
border: 1px solid #999;
height: 20px;
width: 20px;
}
input[type='range']::-moz-range-thumb {
-moz-appearance: none;
border-radius: 20px;
background-color: #FFF;
box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
border: 1px solid #999;
height: 20px;
width: 20px;
}
</style>
<script>
function updateTextInput(val) {
harga = val * 8000;
document.getElementById('o1').value=val;
document.getElementById('price1').value=harga;
updateTot();
}
function updateTextInput2(val) {
harga = val * 9000;
document.getElementById('o2').value=val;
document.getElementById('price2').value=harga;
updateTot();
}
function updateTot(){
var h1 =parseFloat( document.getElementById("price1").value);
var h2 =parseFloat( document.getElementById("price2").value);
var Tot = h1 + h2;
document.getElementById("priceTot").value = Tot;
}
</script>
</head>
<body>
<div id="content">
<h3><center>Grosir Gula & Beras Online</center></h3>
<form>
<div id="left">
<b>Gula</b><br/>
<input type="range" min="0" max="100" value="0" step="1" oninput="updateTextInput(this.value);" id="input1" />
<output id="o1"></output>
<label>Kg</label>
</div>
<div id="right">
<h4>Rp <input type="text" id="price1" value="0"></h4>
</div>
<br/>
<div id="left">
<b>Beras</b><br/>
<input type="range" min="0" max="100" value="0" step="1" oninput="updateTextInput2(this.value);" id="input2" />
<output id="o2"></output>
<label>Kg</label>
</div>
<div id="right">
<h4>Rp <input type="text" id="price2" value="0"></h4>
</div>
<br/>
<div id="left">
<br/><br/><h4>Harga Total Belanja :</h4>
</div>
<div id="right">
<h4>Rp <input type="text" id="priceTot" value="0"></h4>
</div>
</form>
</div>
</body>
</html>
Selamat mencoba
