Toggle Switch

Switch from one value to another.

How to use?

Copy-paste the following <script> near the end of your pages under JS Front 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

Monthly Annual
$ 32 / mon
$ 54 / mon
$ 79 / 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": 42,
                                       "max": 32
                                     }'>32</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": 64,
                                       "max": 54
                                     }'>54</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": 89,
                                       "max": 79
                                     }'>79</span>
                            </span>
                            <span class="font-size-1">/ mon</span>
                          </span>
                          <!-- End Pricing -->
                        </div>
                      </div>
                      <!-- End Pricing Section -->
                    
                  

JavaScript behavior

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

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

              
                data-hs-toggle-switch-options='{
                 ...
              }' - array
              
            
              
                data-hs-toggle-switch-item-options='{
                 ...
              }' - array
              
            

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-toggle-switch-options='{}'.

Parameters Description Default value

targetSelector

Selectors in which the text value will be changed from min to max with animation, for each element specified in the array. Essentially, count up/count down happens. undefined

isChecked

true is necessary to prepare a script for the correct processing of data, in those cases when the control element (entity), in the active (active) state. false

eventType

Event that runs the script. 'change'

min

Default value for each item. -

max

Maximum value (to which count up will be carried out), for each item. -