Slider Toggle

by Marc Malignan

HTML

<div class="slider-toggle left">
    <span class="label">This is the default option.</span>
    <span class="slider">
        <span class="toggle">
            <span class="grip"></span>
        </span>
    </span>
    <span class="label">Alternative !</span>
</div>

CSS

body {
    padding-top: 20px;
    background: #ddd;
    text-align: center;
}

.slider-toggle {
    position: relative;
    height: 40px;
    line-height: 32px;
}

.label{
    position: absolute;
    font-family: helvetica;
    font-style: italic;
    color: #bbb;
    transition: color .3s;
}
.label:first-of-type { right:50%; margin-right:50px }
.label:last-of-type { left:50%; margin-left:50px; }
.slider-toggle.left .label:first-of-type,
.slider-toggle.right .label:last-of-type {
    color: #444;
}

.slider {
    position: absolute;
    display: inline-block;
    background: gray;
    left: 50%;
    width:80px; height:32px;
    margin-left: -40px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow:
        0 1px 0 rgba(255,255,255,.5),
        inset 0 4px 0 rgba(0,0,0,.2);
}

.toggle {
    position: absolute;
    top:-4px; left:4px;
    background: orange;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    transition: left .3s;
    box-shadow: 
        0 1px 0 rgba(0,0,0,.4), 
        inset 0 1px 0 rgba(0,0,0,.05), 
        inset 0 -4px 0 chocolate, 
        inset 0 -5px 0 rgba(255,255,255,.4);
}
.slider-toggle.right .toggle { left:44px; }

.grip {
    position: absolute;
    top:50%; left:8px; right:8px;
    margin-top: -3px;
    height: 2px;
    background: rgba(255,255,255,.9);
}
.grip::before {
    content: '';
    position: absolute;
    top:-4px; left:0;
    width:100%; height:100%;
    background: inherit;
}
.grip::after {
    content: '';
    position: absolute;
    top:4px; left:0;
    width:100%; height:100%;
    background: inherit;
}

JavaScript

$('.slider-toggle .slider').click(function(){
    $(this).parent('.slider-toggle')
        .toggleClass('left')
        .toggleClass('right');
});