Form Radio Toggler

by meo

HTML

<div class="group">
<label for="test1">test1</label>
<input type="radio" name="test" value="test1" id="test1"/>

<label for="test2">test2</label>
<input type="radio" name="test" value="test2" id="test2"  checked="checked"/>
</div>

CSS

.chooser input {
    display: none;
}
.chooserWrap {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 30px;
    background: rgba(0,0,0,.2);
    border-radius: 20px;
    box-shadow: inset 0 0 5px rgba(0,0,0,.5);
}
.slider {
    position: absolute;
    cursor: pointer;
    left:0;
    top:-1px;
    width: 29px; height: 29px;
    border-radius: 100%;
    background: #fff;
    border: 1px solid rgba(0,0,0,.5);
}

.slider.move {
    background: pink;
}

JavaScript

$(".group").each(function(){
    var snapTo, leftPos, rightPos, sliderWidth, chooserWidth, $inputs, $chooser, $d, $that = $(this);
    
    $d = $(document);
    $that.addClass("chooser");
    $inputs = $that.find("input");
    
    $slider = $("<div />", {"class": "slider"});
    $chooser = $("<div />", {"class": "chooserWrap"});
    
    $slider.appendTo($chooser); 
    $chooser.insertAfter($inputs.eq(0));
    
    sliderWidth = $slider.width();
    chooserWidth = $chooser.width();
    
    leftPos = 0;
    rightPos = chooserWidth - sliderWidth;
    
    snapTo = function( position,noAnim ){
        noAnim = noAnim || false;
        $slider.stop(false,true).animate({"left": position + "px"},noAnim ? 0 : 200);
        if(position){
            $inputs.eq(0).removeAttr("checked");
            $inputs.eq(1).attr("checked","checked");                
        }else{
            $inputs.eq(0).attr("checked","checked");    
            $inputs.eq(1).removeAttr("checked");            
        }
        
    };
    
    if(!$inputs.eq(0).is(":checked")){
        snapTo(chooserWidth - sliderWidth,true);
    }
    
    $that.on("mousedown.slider", function(e){
        e.preventDefault();
        
        var relMouse =  $slider.position().left - e.clientX,
            leftPos =  $chooser.offset().left,
            elementOffsetLeft = $chooser.position().left,
            mouseMove = false;
       

        $d.off("mousemove.slider").on("mousemove.slider", function(e){
            mouseMove = true;
            
            if(e.clientX <= elementOffsetLeft || elementOffsetLeft + chooserWidth <= e.clientX){
                return false;
            }
        
            $slider.css("left", elementOffsetLeft + e.clientX + relMouse - sliderWidth + "px").addClass("move");
            
        }).off("mouseup.slider").on("mouseup.slider", function(e){
            var leftOffset, rightOffset, sliderOffsetLeft = $slider.offset().left;
            
           ...