jQuery Plugin To Transform Radio Buttons Into A Sliders - Radios To Slider

Radios To Slider is a jQuery plugin to transform radio buttons into a nice styled value slider that allows you to pick a option with a simple sliding effect.

How to use it:

1. Include the required radios-to-slider.css in the header.

<link rel="stylesheet" href="css/radios-to-slider.css">

2. Include the jQuery library and jQuery radios to slider plugin in the footer so the page loads faster.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/jquery.radios-to-slider.js"></script> 

3. Create some radio button inputs on your web page.

<div id="radios">
<input id="option1" name="options" type="radio">
<label for="option1"> Option 1 </label>
<input id="option2" name="options" type="radio">
<label for="option2"> Option 2 </label>
<input id="option3" name="options" type="radio" checked>
<label for="option3"> Option 3 </label>
<input id="option4" name="options" type="radio">
<label for="option4"> Option 4 </label>
<input id="option5" name="options" type="radio">
<label for="option5"> Option 5 </label>
</div>

4. Initialize the slider and done.

$("#radios").radiosToSlider();

5. Plugin options available.

$("#radios").radiosToSlider({
  size: 'medium',
  animation: true,
  fitContainer: true,
  isDisable: false,
  onSelect: null
});

Change logs:

v0.3.1 (2016-11-25)

• Add setDisable() and setEnable() function
• Add isDisable option
• Changelog file
• Beautify in files
• Remove and fix .DS_Store
• Remove bump version (inconsistent)
• First interaction show bad effect (negativ outside)
• Solved max-width

2016-10-19

• Fixed Multiple radio groups issue

2015-10-29

• JS update.

2015-05-13

• Changed "responsive" to "fitContainer"
• style class .slider-label-active added

v0.2.9 (2014-07-18)

• Update some constants

v0.1.9 (2014-07-18)

• Make chainable by returning

---

This awesome jQuery plugin is developed by rubentd. For more Advanced Usages, please check the demo page or visit the official website.