Radio Slider Plugin

by darcyclarke

HTML

<script src="http://f.cl.ly/items/140C2W3Y0V3U3q1R030i/jquery-ui-1.8.16.custom.min.js"></script>
<fieldset class="radio_slider">
              <label>
                Single
                <input name="F1040[_FilingStatus[_0130" type="radio" autocomplete="off" id="box0" class="radioFIF" tabindex="1" value="1">
              </label>

              <label>
                Married Filing Joint
                <input name="F1040[_FilingStatus[_0130" type="radio" autocomplete="off" id="box0" class="radioFIF" tabindex="2" value="2">
              </label>

              <label>
                Married Filing Separate
                <input name="F1040[_FilingStatus[_0130" type="radio" autocomplete="off" id="box0" class="radioFIF" tabindex="3" value="3">
              </label>

              <label>
                Head of Household
                <input name="F1040[_FilingStatus[_0130" type="radio" autocomplete="off" id="box0" class="radioFIF" tabindex="4" value="4">
              </label>

              <label>
                Qualifying Widow(er) With Dependent Children
                <input name="F1040[_FilingStatus[_0130" type="radio" autocomplete="off" id="box0" class="radioFIF" tabindex="5" value="5">
              </label>
              
            </fieldset>

CSS

.radioSlider {
    background: #666;
    height: 10px;
    position:relative;
}

.radioSlider a {
  height: 10px;
    width: 10px;
    display: block;
  background: red; 
   position: absolute; 
}

.radioSlider li {
    display: inline-block; 
  text-align: center;  
}

JavaScript

(function($){
    $.fn.radioSlider = function(options) {
        var settings = $.extend({}, $.fn.radioSlider.defaults, options);
        this.each(function (i, el) {
            el = $(el);
            var container = $("<div class='radioSlider "+el[0].className+"'>").insertAfter(el),
                slider = $("<div class='slider'>").appendTo(container), 
                list = $("<ul class='items'>").appendTo(container),
                width = parseInt(slider.width()),
                count = 0;
            el.hide().find('label').each(function(i, el){
                el = $(el);
                var input = el.find("input[type='radio']"),
                    li = $("<li class='"+input[0].className+"' data-radio-name='"+input[0].name+"'>"+el.text().trim()+"</li>").appendTo(list);
                count++;
            });
            list.find("li").css({width:Math.round(((width/count)/width)*100)+"%"});
            slider.slider({animate:true,min: 0, max:width, change: function(e, ui){             
                    var id = Math.round((ui.value/width)*count),
                    link = $(ui.handle),
                    container = link.parents("radioSlider"),
                    item = $("li").removeClass("selected").eq(id).addClass("selected"),
                    inputs = $("input[type='radio'][name='"+item.data("radio-name")+"']");
                     inputs.filter(":checked").removeAttr("checked").end().eq(id).attr("checked","checked");
                var position = ((width/count) * (id+1)) - ((width/count) / 2);
                position = (position <= 0) ? 0 : position;
                link.css({left:ui.value});
                link.animate({
                    left: position
                }, 250);      
                console.log(width);
                console.log(count);
console.log(((width/count) * id) / 2);                
                 } 
             });
        });
        return this;
    };
     $.fn.radioSlider.defaults = {};
...