Toggle Switch
Cara Pakai
Copy-paste script berikut sebelum tag penutup <body>:
<script>
(function() {
// INITIALIZATION OF TOGGLE SWITCH
// =======================================================
new NueToggleSwitch('.js-toggle-switch')
});
</script>
19
39
59
<!-- Form Switch -->
<div class="d-flex justify-content-center mb-4">
<div class="form-check form-switch form-switch-between">
<label class="form-check-label">Monthly</label>
<input class="js-toggle-switch form-check-input" type="checkbox"
data-nue-toggle-switch-options='{
"targetSelector": "#pricingCount1, #pricingCount2, #pricingCount3"
}'>
<label class="form-check-label">Annually</label>
</div>
</div>
<!-- End Form Switch -->
<div class="row justify-content-center">
<div class="col-md-3 mb-3 mb-md-0">
<h2 id="pricingCount1" class="display-4 text-center"
data-nue-toggle-switch-item-options='{
"min": 19,
"max": 29
}'>19</h2>
</div>
<!-- End Col -->
<div class="col-md-3 mb-3 mb-md-0">
<h2 id="pricingCount2" class="display-4 text-center"
data-nue-toggle-switch-item-options='{
"min": 39,
"max": 49
}'>39</h2>
</div>
<!-- End Col -->
<div class="col-md-3 mb-3 mb-md-0">
<h2 id="pricingCount3" class="display-4 text-center"
data-nue-toggle-switch-item-options='{
"min": 59,
"max": 69
}'>59</h2>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
Pakai Modal
Toggle Switch
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Toggle Switch</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
</div>
<div class="modal-body">
<form>
<!-- Form Switch -->
<div class="d-flex justify-content-center mb-4">
<div class="form-check form-switch form-switch-between">
<label class="form-check-label">Monthly</label>
<input class="js-toggle-switch form-check-input" type="checkbox"
data-nue-toggle-switch-options='{
"targetSelector": "#pricingCountModal1, #pricingCountModal2, #pricingCountModal3"
}'>
<label class="form-check-label">Annually</label>
</div>
</div>
<!-- End Form Switch -->
<div class="row justify-content-center">
<div class="col-md-3 mb-3 mb-md-0">
<h2 id="pricingCountModal1" class="display-4 text-center"
data-nue-toggle-switch-item-options='{
"min": 19,
"max": 29
}'>19</h2>
</div>
<!-- End Col -->
<div class="col-md-3 mb-3 mb-md-0">
<h2 id="pricingCountModal2" class="display-4 text-center"
data-nue-toggle-switch-item-options='{
"min": 39,
"max": 49
}'>39</h2>
</div>
<!-- End Col -->
<div class="col-md-3 mb-3 mb-md-0">
<h2 id="pricingCountModal3" class="display-4 text-center"
data-nue-toggle-switch-item-options='{
"min": 59,
"max": 69
}'>59</h2>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Tutup</button>
<button type="button" class="btn btn-primary">Simpan</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Methods
| Parameter | Deskripsi | Nilai default |
|---|---|---|
| Target Class yang ingin nilainya berubah dari min ke max dengan animasi (perhitungan), untuk setiap element yang ditentukan dalam bentuk array. Intinya, menampilkan hitungan naik/turun. | undefined |
| true bisa digunakan supaya target otomatis aktif ketika pertama kali di load. | false |
| Event untuk menjalankan script. | 'change' |
| Nilai awal. | - |
| Nilai maksimal. | - |