1 2 Simple Price Calculator dengan Input Range Oleh: Septi Wulan Haloo, pada tutorial pertama saya ini, saya ingin membagikan cara membuat simple pric...
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. 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.
