Switch Toggle

The Component

HTML

• To use this component, include the following HTML structure:
  • The ids should be different for each instance of the component.
  • The classes name should be same as classes are responsible for styling.

<div class="switch-wrapper">
<input
    type="checkbox"
    class="switch-input"
    id="show_packet_weight_unit_input"
    style="display: none"
/>
<label
    for="show_packet_weight_unit_input"
    class="switch-label custom-control-label ankur_language"
></label>
<span
    class="switch-text"
    id="show_packet_weight_unit_text"
    style="line-height: 11px; font-size: 10px !important"
    >Kg</span
>
</div>

JS

• Manipulate the DOM elements to achieve the desired behavior.
• Use the checked property to get the current state and current value of the switch.

// Wire toggle events for packet weight unit
const switchPacketWeightUnitInput = document.getElementById("show_packet_weight_unit_input");
const showPacketWeightUnitText = document.getElementById("show_packet_weight_unit_text");

// Toggle event
if (switchPacketWeightUnitInput && showPacketWeightUnitText) {
  switchPacketWeightUnitInput.addEventListener("change", function () {
    if (this.checked) {
      showPacketWeightUnitText.textContent = "Gm";
    } else {
      showPacketWeightUnitText.textContent = "Kg";
    }
  });
}

CSS

• Just for reference.
• This is defined in custom.css.
• It should not be added again or modified unless absolutely necessary.

/* Toggle Switch Styles */

.switch-wrapper {
  position: relative !important;
  width: 58px !important;
  height: 34px !important;
}

.switch-label {
  position: relative !important;
  width: 58px !important;
  height: 34px !important;
  background: #e8e9ea !important;
  border-radius: 50px !important;
  display: block !important;
  cursor: pointer !important;
  transition: 0.3s !important;
}

.switch-label::after {
  position: absolute !important;
  top: 2px !important;
  left: 1px !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2) !important;
  content: "" !important;
  display: block !important;
  z-index: 6 !important;
  width: 30px !important;
  height: 30px !important;
  transition: all 250ms ease !important;
  border-radius: 50px !important;
  background-color: #fff !important;
  border: solid 1px rgba(152, 152, 152, 0.4) !important;
}

.switch-text {
  position: absolute !important;
  width: 24px !important;
  height: 24px !important;
  top: 5px !important;
  left: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  pointer-events: none !important;
  transition: 0.3s !important;
  z-index: 9 !important;
  color: #6c6c6c !important;
}

/* Switch movement */
.switch-input:checked + .switch-label::after {
  left: 27px !important;
}

.switch-input:checked ~ .switch-text {
  left: 30px !important;
}