Simple Price Calculator Dengan Input Range

Simple Price Calculator dengan Input Range
Oleh: Septi Wulan
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 k...
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;
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 {
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;
updateTot();
}
function updateTot(){
var h1 =parseFloat( document.getElementById("price1").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;
height: 10px;
vertical-align: middle;
}
input[type='range']::-moz-range-track {
border-radius: 5px;
height: 10px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
height: 20px;
width: 20px;
}
input[type='range']::-moz-range-thumb {
height: 20px;
width: 20px;
}
</style>
<script>
function updateTextInput(val) {
harga = val * 8000;
updateTot();
}
function updateTextInput2(val) {
harga = val * 9000;
updateTot();
}
function updateTot(){
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" />
<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" />
<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 :)
Tentang Penulis
Septi Wulan

Simple Price Calculator Dengan Input Range

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Simple Price Calculator Dengan Input Range

Diunggah oleh

Hak Cipta:

Format Tersedia

Simple Price Calculator dengan Input Range

Oleh: Septi Wulan

Seperti ini nih tampilannya :

<input type="range" min="0" max="100" value="0" step="1"

Nah, untuk styling bar-nya seperti ini :

Fungsi updateTextInput dan updateTot

Untuk kode secara keseluruhannya seperti ini:

Anda mungkin juga menyukai