radios-to-slider
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
Usage
<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>Options
| Option | Values | Default |
| animation | true, false | true |
| onSelect | callback | null |
| size | string | "medium" |
| fitContainer | true, false | true |
| isDisable | true, false | false |
API
| 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 |
Demo and examples
