Skip to content
Turn a radio button set into a sexy slider
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
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
};
You can’t perform that action at this time.