Turn a radio button set into a sexy slider
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
images
README
demo.html
jquery.min.js
jquery.radioSwitch.js
jquery.radioSwitch.min.js
jquery.radioSwitch.pack.js

README

/******************************************************* 
*  jQuery radioSwitch plugin                           *
* **************************************************** *
*  jquery.radioSwitch.js                               *
*  Author: Ammon Casey                                 *
*  Website: http://www.brokenparadigmlabs.com          *
*  https://github.com/ammonkc/radioSwitch              *
*  Twitter: @ammonkc                                   *
*  Date: 12.13.2010                                    *
*                                                      *
*  Copyright (c) 2010, Ammon Casey                     *
*  licensed under the MIT license:                     *
*  http://www.opensource.org/licenses/mit-license.php  *
********************************************************/

check the demo source for examples of how to use the plugin.
There are many options that can be passed via the first parameter. 
The second parameter is for a callback function.

Basic usage:
The radio button set needs to be wrapped in a container. Call the plugin on that container.
Each radio button needs to have a label with the for attribute [for=""] pointing to the corresponding
radio button's id.

HTML:

    <div class="radio-container">
        
        /** radio buttons and labels go in here. **/
        <input type="radio" name="radioset" id="radio1" value="one"/>
        <label for="radio1">one</label>
        
        <input type="radio" name="radioset" id="radio2" value="two"/>
        <label for="radio2">Two</label>
        
        <input type="radio" name="radioset" id="radio3" value="three"/>
        <label for="radio3">Three</label>
        
    </div>

Javascript:

$(".radio-container").radioSwitch({width:60});



Defaults:

var settings = {
    track_class: 'radioSwitch-track',
    handle_class: 'radioSwitch-handle',
    label_class: 'radioSwitch-label',
	mouse_over: 'pointer',
	mouse_out:  'default',
	hide_radio: true,
	sync_checked: true,
	use_images: false,
	speed: '250',	
	width: 50,
	height: 25,
	radius: 4,
	padding: 1,
	track_img: 'images/switch_track.png',
	track_bg_color: '#5f6777',
	track_dropshadow_color: 'rgba(255, 255, 255, 0.15)',
	handle_img: 'images/switch_handle.png',
	handle_bg_color: '#f9f9f9',
	handle_border_color: '#d0d0d0',
	label_text_color: "#ffffff",
	label_font_size: 12
};