Toggle Switch

Switch from one value to another.

How to use?

Copy-paste the following <script> near the end of your pages under JS Blueberry to enable it.

<script src="../../assets/vendor/hs-toggle-switch/dist/hs-toggle-switch.min.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of toggle switch
    $('.js-toggle-switch').each(function () {
      var toggleSwitch = new HSToggleSwitch($(this)).init();
    });
  });
</script>

Basic examples

Preview
HTML

Monthly Annual

৳ 3200 / mon

৳ 5400 / mon

৳ 7900 / mon

<!-- Toggle Switch -->
<div class="d-flex justify-content-center align-items-center mb-5">
  <span class="font-size-1 text-muted">Monthly</span>
  <label class="toggle-switch mx-2" for="customSwitch">
    <input type="checkbox" class="js-toggle-switch toggle-switch-input" id="customSwitch" checked
           data-hs-toggle-switch-options='{
             "targetSelector": "#pricingCount1, #pricingCount2, #pricingCount3"
           }'>
    <span class="toggle-switch-label">
      <span class="toggle-switch-indicator"></span>
    </span>
  </label>
  <span class="font-size-1 text-muted">Annual</span>
</div>
<!-- End Toggle Switch -->

<!-- Pricing Section -->
<div class="row mx-n2">
  <div class="col-sm-6 col-md-4 px-2 mb-3">
    <!-- Pricing -->
    <span class="d-block text-center">
      <span class="text-dark align-top">৳</span>
      <span class="font-size-4 text-dark font-weight-bold mr-n2">
        <span id="pricingCount1"
               data-hs-toggle-switch-item-options='{
                 "min": 4200,
                 "max": 3200
               }'>3200</span>
      </span>
      <span class="font-size-1">/ mon</span>
    </span>
    <!-- End Pricing -->
  </div>

  <div class="col-sm-6 col-md-4 px-2 mb-3">
    <!-- Pricing -->
    <span class="d-block text-center">
      <span class="text-dark align-top">৳</span>
      <span class="font-size-4 text-dark font-weight-bold mr-n2">
        <span id="pricingCount2"
               data-hs-toggle-switch-item-options='{
                 "min": 6400,
                 "max": 5400
               }'>5400</span>
      </span>
      <span class="font-size-1">/ mon</span>
    </span>
    <!-- End Pricing -->
  </div>

  <div class="col-sm-6 col-md-4 px-2 mb-3">
    <!-- Pricing -->
    <span class="d-block text-center">
      <span class="text-dark align-top">৳</span>
      <span class="font-size-4 text-dark font-weight-bold mr-n2">
        <span id="pricingCount3"
               data-hs-toggle-switch-item-options='{
                 "min": 8900,
                 "max": 7900
               }'>7900</span>
      </span>
      <span class="font-size-1">/ mon</span>
    </span>
    <!-- End Pricing -->
  </div>
</div>
<!-- End Pricing Section -->

Extend

By assigning a variable, you can call the standard methods of the plugin:

<script>
  $(document).on('ready', function () {
    // initialization of toggle state
    $('.js-toggle-switch').each(function () {
     var toggleSwitch = new HSToggleSwitch($(this)).init();
    });
  });
</script>

Attributes