Hai, balik lagi ditutorial pemrograman Dumet School, teman teman masih semangat yah belajar tentang hal hal baru tentang pemrograman, kali ini saya akan membahas tentang Bagaimana Cara Membuat Progress Bar Berdasarkan Range Menggunakan JavaScript, jadi idenya kita akan membuat sebuah inputan range yang nantinya range tersebut bisa mengatur dari si progress bar tersebut,
jadi ketika range kita arahakan ke angka 10% maka progress barnya akan berada di 10%, dan seterusnya oke penasaran bagaimana membuatnya, langsung saja kita mulai praktekan, pastikan teman teman sudah didepan layar computer dan siap untuk mengoding, oke jika sudah buatkan file baru bernama index.html dan tambahkan script berikut didalam file yang tadi teman teman buat.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<body> <div class="container"> <div class="row" style="padding-top: 30px"> <div class="col-md-8"> <div class="progress"> <div class="progress-bar" data-length="30" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <br> <input type="range" id="range" max="100" min="0" class="form-control"> </div> </div> </div> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> var bar = document.querySelector('.progress-bar'), range = document.querySelector('#range'); range.value = bar.style.width; range.addEventListener('input', function(e) { bar.style.width = range.value +"%"; bar.innerHTML = range.value + "%"; }); </script> </body> |
Jika sudah disave dan jalankan dibrowser, coba teman teman mainkan pada inputan range nya, maka dengan otomatis status progress bar akan berubah sesuai dengan range yang ditentukan, oke cukup mudah bukan? sekian tutorial pemrograman web tentang Bagaimana Cara Membuat Progress Bar Berdasarkan Range Menggunakan JavaScript. Sampai bertemu diartikel selanjutnya dan sampai jumpa.
#KeepLearn
#IsmetMA