Cara Membuat Input-Spinner Dengan Bootstrap

Hai, ketemu lagi dengan saya, kali ini saya akan berbagi tutorial mengenai Cara Membuat Input-Spinner Dengan Bootstrap, sebelum nya ada yang tau input-spinner itu apa ? secara singkat input-spinner itu merupakan sebuah inpitan dimana kita bisa menambah atau mengurangi dengan hanya meng-klik tombol panah, Nah biar jelas kita praktikan langsung.

Langsung saja, silahkan kalian tambahkan kode berikut pada index bootstrap nya.

<div class="container">
<div class="page-header"><h1>Bootstrap 3 input-spinner</h1></div>  
  <div class="input-group spinner">
    <input type="text" class="form-control" value="42">
    <div class="input-group-btn-vertical">
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
    </div>
  </div>
</div>

kode diatas adalah untuk membuat tampilan inputan dan tombol terlebih, setelah itu kita akan tambahkan kode CSS3 berikut untuk membuat inputan dan tombol menjadi input-spinner.

.spinner {
  width: 100px;
}
.spinner input {
  text-align: right;
}
.input-group-btn-vertical {
  position: relative;
  white-space: nowrap;
  width: 1%;
  vertical-align: middle;
  display: table-cell;
}
.input-group-btn-vertical > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  padding: 8px;
  margin-left: -1px;
  position: relative;
  border-radius: 0;
}
.input-group-btn-vertical > .btn:first-child {
  border-top-right-radius: 4px;
}
.input-group-btn-vertical > .btn:last-child {
  margin-top: -2px;
  border-bottom-right-radius: 4px;
}
.input-group-btn-vertical i{
  position: absolute;
  top: 0;
  left: 4px;
}

Kalo sudah, terakhir kita tambahkan kode Javascript berikut ini untuk bisa menambah dan mengurangi nilai yang kita inginkan pada input-spinner.

(function ($) {
  $('.spinner .btn:first-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
  });
  $('.spinner .btn:last-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
  });
})(jQuery);

Kalo sudah semua kode diatas di salin, simpan terlebih dahulu, kemudian jalankan dibrowser masing-masing dan lihat hasil nya. Selesai

Nah seperti itulah bentuk daripada input-spinner, baik sampai disini tutorial mengenai Cara Membuat Input-Spinner Dengan Bootstrap, semoga bermanfaat, amin.

Selamat mencoba 🙂