Apple-inspired bootstrap slider buttons | demo: https://jsfiddle.net/xxcade2y/1/

index.css

.slider {  
    display: inline-block;
    margin-top: 5px;
}
.slider-bg {
    display: inline-block;
    width: 54px;
    height: 22px;
    border-radius: 4px;
    border-color: rgb(204, 204, 204);
    background-color: lightgrey;
}
.slider-bg-active {
    background-color: #4bd763;
}
.slider-btn {
    position: relative;
    right: 57px;
    bottom: 8px;
    border-radius: 4px !important;
    background-color: #fff !important;
    margin-top: 1px;
    border-color: rgb(204, 204, 204) !important;
    height: 20px;
    z-index: 2;
}
.slider-btn:focus {
    outline: none !important;
}
.slider-label {
    position: relative;
    bottom: 6px;
    display: inline-block;
    margin-right: 30px;
}

index.html

<div class="slider-label">
    <strong>Option:</strong>
</div>
<div class="slider">
    <div class="slider-bg"></div>
    <button type="button" class="btn btn-default slider-btn"></button>
</div>

index.js

$(".slider-bg, .slider-btn").click(function(){
    var slider = $(this).parent();
    console.log(slider);
    if (slider.children(".slider-bg").hasClass("slider-bg-active")){
        slider.children(".slider-bg").removeClass("slider-bg-active");        
        slider.children(".slider-btn").animate({
            right: "57px",
        }, 200);
    } else {
        slider.children(".slider-bg").addClass("slider-bg-active");        
        slider.children(".slider-btn").animate({
            right: "31px",
        }, 200);
    }
});