A CodePen by Jed Foster. CSS toggle (full width slide) - Mimic the ON/OFF toggle control from iOS. This version keeps each state (ON/OFF) at their full width, and slides them left and right. This allows you have a different color background for each state, very closely imitating the behavior of the iOS toggle control. However, there seems to be …

index.html

<div class="toggle">

                  <label class="toggle-radio" for="toggleOption2">ON</label>
                  <input type="radio" name="toggleOptions" id="toggleOption1" value="option1" checked="checked">
                  <span class="knob"> </span>
                  <label class="toggle-radio" for="toggleOption1">OFF</label>
                  <input type="radio" name="toggleOptions" id="toggleOption2" value="option2">
                                    

                </div>

script.js

var toggleHandler = function(toggle) {
    var radio = $(toggle).find("input");

    var checkToggleState = function() {
        if (radio.eq(0).is(":checked")) {
            $(toggle).removeClass("toggle-off");
        } else {
            $(toggle).addClass("toggle-off");
            
            
        }
    };

    checkToggleState();

    radio.click(function() {
        $(toggle).toggleClass("toggle-off");
        // console.log($(toggle).find('.toggle-radio:last-of-type'));
        var width = $(toggle).width();
        
        //console.log($(toggle).find('.toggle-radio:first-child').css({'left': width - 35}));
       // console.log($(toggle).find('.toggle-radio:last-child').css({'right': 400}));
    });
};

$(document).ready(function() {
    $(".toggle").each(function(index, toggle) {
        toggleHandler(toggle);
       
    });
});

style.scss

@import "compass";
$base: #34495e !default;
$inverse: white !default;
$firm: #1abc9c !default;

@mixin transition($properties) {
  -webkit-transition: $properties;
  -moz-transition: $properties;
  -o-transition: $properties;
  transition: $properties;
  -webkit-backface-visibility: hidden;
}

@mixin clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}


//@mixin opacity($value) {
//  opacity: $value;
//  filter: alpha(opacity = $value * 100);
//  zoom: 1;
//}

// Toggle
.toggle {
  @include clearfix;
  @include transition(0.25s);

  background-color: #fff;
  
  border: 1px solid transparentize(#838383, 0.3);
  border-radius: 90px;
  
  color: $inverse;
  margin: 0 12px 12px 0;
  display: inline-block;
  
  box-shadow: inset 2px 3px 4px -1px transparentize(#838383, 0.7);

  position: relative;
  
 overflow: hidden;
  box-sizing: border-box;
  //height: 30px;
  min-width: 6em;
 
    -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
         background-clip: padding-box;

  input {
    @include opacity(0.01);

    display: none;
    position: absolute;
    outline: none !important;
  }
  
  .knob { 
    @include transition(0.25s);
    display: block;
    border-radius: 90px;;
    width: 20px;
    height: 20px;
    position: relative;
    background: #525960;
    float: left;
    left: 13%;
    z-index: 1000;

    //margin-top: 5px;
    margin-left:-12.5%;
  }

  .toggle-radio {
    @include transition(0.25s);
    
    box-sizing: border-box;
    //background: transparentize(#BFE07F, 0.6);
    //padding: 5px;
    color: #333;
    display: inline-block;
  
    left: -89%;
    position: absolute;
    text-align: right;
    
    width: 89%;
    line-height: 20px;
    margin: 0;
    margin-bottom: -30px;
    margin-right: 13%;
     
       -moz-background-clip: padding;
     -webkit-background-clip: padding-box;
             background-clip: padding-box;
    
    &:first-child {
      //background: transparentize(#F7B779, 0.6);
      @include transition(0.23s);
      left: 0;
      text-align: left;
      margin-right: 0;
      margin-left: 13%;
      padding-left: 20%;

      border-top-right-radius: 60px;
      border-bottom-right-radius: 60px;
    }    
  }

  &.toggle-off {
    //background-color: scale-color(desaturate($base, 15%), $lightness: 75%);

    .knob {
      left:91%;
    }

    .toggle-radio {
      left: 0%;
      margin-right: 0%;      
      border-top-left-radius: 60px;
      border-bottom-left-radius: 60px;

      padding-right: 20%;

      &:first-child {
        @include transition(0.35s);
        left: 100%;
        margin-left:0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
}