how to customize ion-toggle form circle to rect shape

Question

i'm new in ionic and i need to customize ion-toggle like this.

but i don't know how to change from this.

Could anyone help me?

Thanks!

EDIT

Thanks to @LeftyX for the custom style.

I've used this stackoverflow link for add text to ion-toggle

Answer 1

You must change a few css rules.
You've got 2 elements there: .toggle .track and .toggle .handle.

Below you will find some css which will change the border radius, width and animation. .toggle .handle:before will add a ionicon to the handle.

.toggle .track
{
      border-radius: 6px !important;
      width: 70px;
}

.toggle .handle
{
      border-radius: 6px !important;
      width: 32px !important;
      height: 32px !important;
      top: 4px !important;
}

.toggle .handle:before {
   font-family: "Ionicons";
   content: "\f13f" !important;
   top: -11px !important;
   left: -21.5px !important;
}

.toggle input:checked + .track .handle {
    -webkit-transform: translate3d(28px, 0, 0);
    transform: translate3d(28px, 0, 0);
}

Adding labels SI and NO to your ion-toggle won't be that easy and I guess it would require building a directive.

Anyway, this is the final result:

and the CodePen.