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

File Size: 45.7 KB
Views Total: 16598
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

4. Initialize the slider and done.


5. Plugin options available.

  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


  • Fixed Multiple radio groups issue



  • 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.