radios-to-slider
Radios to slider is a jquery plugin to create a slider using a list of radio buttons.
Transform this:
Into this:
Basic usage:
<div id="radios">
<input id="option1" name="options" type="radio">
<label for="option1">1
year</label>
<input id="option2" name="options" type="radio">
<label for="option2">2 years</label>
<input id="option3" name="options" type="radio" checked>
<label for="option3">3 years</label>
<input id="option4" name="options" type="radio">
<label for="option4">4 years</label>
<input id="option5" name="options" type="radio">
<label for="option5">5+ years</label>
</div>
$('#radios').radiosToSlider();
Animation
You can turn on and off the animation for the knob:
$('#radios').radiosToSlider({
animation: true,
});
Installation
Clone the repo into your project
git clone https://github.com/rubentd/radios-to-slider.git
Or install using bower
bower install --save radios-to-slider
Then include the references to the css and js files in your html:
<link rel="stylesheet" type="text/css" href="bower_components/radios-to-slider/dist/radios-to-slider.css">
<script type="text/javascript" src="bower_components/radios-to-slider/dist/jquery.radios-to-slider.js">
If you liked this plugin, don't forget to give me a star on Github.