Switch

It is for switching from one setting 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-switch/dist/hs-switch-text.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 state
    $('.js-switch-text').each(function () {
      var switchText = new HSSwitchText($(this)).init();
    });
  });
</script>

Basic examples

Monthly Yearly Save up to 10%

৳500/mo

Maximum ad spend: ৳25000/mo

<!-- Card -->
<div class="card text-center z-index-2" data-aos="fade-up">
  <div class="card-body p-7">
    <!-- Group Toggle Switch -->
    <div class="btn-group btn-group-sm btn-group-toggle btn-group-segment btn-group-pills my-5" data-toggle="buttons">
      <label class="btn active">
        <input type="radio" name="options" id="option1" class="js-switch-text" checked
               data-hs-switch-text-options='{
                 "target": [{
                   "selector": "#rangeSliderResult",
                   "text": 500
                 }, {
                   "selector": "#rangeSliderSecondaryResult",
                   "text": 50000
                 }],
                 "startUpdateOnChange": true
               }'> Monthly
      </label>
      <label class="btn">
        <input type="radio" name="options" id="option2" class="js-switch-text"
               data-hs-switch-text-options='{
                 "target": [{
                   "selector": "#rangeSliderResult",
                   "text": 475
                 }, {
                   "selector": "#rangeSliderSecondaryResult",
                   "text": 25000
                 }],
                 "startUpdateOnChange": true
               }'> Yearly

        <!-- Arrow -->
        <figure class="position-absolute top-0 text-nowrap mt-n5 ml-7">
          <svg class="d-block position-absolute mt-n2 ml-n4" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
            <path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"/>
            <path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"/>
          </svg>
          <span class="badge badge-primary badge-pill py-2 px-3">Save up to 10%</span>
        </figure>
        <!-- End Arrow -->
      </label>
    </div>
    <!-- End Group Toggle Switch -->

    <!-- Range Slider -->
    <div class="display-4 font-size-md-down-4 text-dark">
      ৳<span id="rangeSliderResult"></span>/mo
    </div>
    <div class="d-flex justify-content-center mb-5">
      Maximum ad spend:
      <span class="text-primary ml-1">৳25000/mo</span>
    </div>
    <!-- End Range Slider -->

    <div class="mb-5">
      <input class="js-ion-range-slider" type="text"
             data-hs-ion-range-slider-options='{
               "extra_classes": "range-slider",
               "type": "single",
               "min": 250,
               "max": 750,
               "step": 25,
               "from": 500,
               "secondary_val": {
                 "steps": [250, 275, 300, 325, 350, 375, 400, 425, 450, 475, 500, 525, 550, 575, 600, 625, 650, 675, 700, 725, 750],
                 "values": [25000, 27000, 30000, 32000, 35000, 37000, 40000, 42000, 45000, 47000, 50000, 52000, 55000, 57000, 60000, 62000, 65000, 67000, 70000, 72000, 75000]
               },
               "prefix": "৳",
               "secondary_target_el": "#rangeSliderSecondaryResult",
               "result_min_target_el": "#rangeSliderResult"
             }'>
    </div>
  </div>
</div>
<!-- End Card -->

<!-- JS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/ion-rangeslider/css/ion.rangeSlider.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-switch/dist/hs-switch-text.min.js"></script>
<script src="../../assets/vendor/ion-rangeslider/js/ion.rangeSlider.min.js"></script>

<!-- JS Blueberry -->
<script src="../../assets/js/hs.ion-range-slider.js"></script>

<script>
  $(document).on('ready', function () {
    // initialization of ion range slider
    var ionRangeSlider = $.HSCore.components.HSIonRangeSlider.init($('.js-ion-range-slider'), {
      cusOnChange: function () {
        var $checked = $('.js-switch-text:checked'),
          defData = JSON.parse($checked.attr('data-hs-switch-text-options'));

        defData.target[0].text = $('#rangeSliderResult').text();
        defData.target[1].text = $('#rangeSliderSecondaryResult').text();

        $checked.attr('data-hs-switch-text-options', JSON.stringify(defData));
      }
    });

    // initialization of switch
    $('.js-switch-text').each(function () {
      var switchText = new HSSwitchText($(this), {
        afterChange: function () {
          ionRangeSlider.data('ionRangeSlider').update({
            from: $(this)[0].target[0].text
          });
        }
      }).init();
    });
  });
</script>

Extend

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

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

Attributes