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

jQuery Plugin To Transform Radio Buttons Into A Sliders - Radios To Slider
File Size: 45.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

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.