toggle.css

#toggle-switch-container {
    width: 160px;
    height: 36px;
    margin: auto;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    user-select: none;
    cursor: pointer;
}

.toggle-inner-container {
    position: absolute;
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;
    text-transform: uppercase;
    font-size: .6em;
    letter-spacing: .2em;
}

.toggle-inner-container:first-child {
    background: #e9e9e9;
    color: #a9a9a9;
}

.toggle-inner-container:nth-child(2) {
    background: dodgerblue;
    color: white;
    clip-path: inset(0 50% 0 0);
    transition: .3s cubic-bezier(0,0,0,1);
}

.toggle {
    width: 50%;
    position: absolute;
    height: inherit;
    display: flex;
    box-sizing: border-box;
}

.toggle p {
    margin: auto;
}

.toggle:nth-child(1) {
    right: 0;
}

ToggleSwitchWithLabels.scala

/**
  * A toggle switch with two labels. Modeled after: https://codemyui.com/toggle-switch-with-lables/
  */
object ToggleSwitchWithLabels {
  private var toggled = true
  
  def apply(labelOn: String, labelOff: String) =  {
    def onClick = {
      println("on click: " + toggled)
      toggled = !toggled
      if (toggled) {
        jQuery("#toggle-container").css("clipPath", "inset(0 50% 0 0)")
        jQuery("#toggle-container").css("backgroundColor", "dodgerblue")
      } else {
        jQuery("#toggle-container").css("clipPath", "inset(0 0 0 50%)")
        jQuery("#toggle-container").css("backgroundColor", "#D74046")
      }
    }

    div(id := "toggle-switch-container", onclick := {() => onClick })(
      div(cls := "toggle-inner-container")(
        div(cls := "toggle")(
          p(labelOff)
        ),
        div(cls := "toggle")(
          p(labelOn)
        )
      ),
      div(id := "toggle-container", cls := "toggle-inner-container")(
        div(cls := "toggle")(
          p(labelOff)
        ),
        div(cls := "toggle")(
          p(labelOn)
        )
      )
    )
  }
}