If you are using angular, check out this awesome AngularJS Module by wodka
jQuery plugin to create a slider using a list of radio buttons
<div id="radios">
<input id="option1" name="options" type="radio" value="1">
<label for="option1">1 <br>year</label>
<input id="option2" name="options" type="radio" value="2">
<label for="option2">2 years</label>
<input id="option3" name="options" type="radio" value="3" checked>
<label for="option3">3 years</label>
<input id="option4" name="options" type="radio" value="4">
<label for="option4">4 years</label>
<input id="option5" name="options" type="radio" value="5">
<label for="option5">5+ years</label>
</div>
<script>
$(document).ready(function(){
var radios = $("#radios").radiosToSlider();
// Disable input
radios.setDisable();
// Enable input
radios.setEnable();
// Retrieve value
radios.getValue();
});
</script>
Option |
Values |
Default |
animation |
true, false |
true |
onSelect |
callback |
null |
size |
string |
"medium" |
fitContainer |
true, false |
true |
isDisable |
true, false |
false |
Function |
Callback |
Args |
setDisable |
true |
$levels, $inputs |
setEnable |
true |
$levels, $inputs |
getValue |
false |
- |
Events |
Triggered |
radiochange |
If triggered [click, change] events |
radiodisabled |
When disabled radio |
radiodenabled |
When enabled radio |