What is causing this odd behaviour in this range polyfill?

telesphoreo

New Member
I am trying to convert a HTML5 range input into a group of radio boxes. Each radio box corresponds to a value in the original range. Next to each radio box there is text displaying it's value.For some reason, the last bit of text, which should display the value of the last radio box, is not appearing. There should be a 10 on the far right of this image.
IXdMc.png
Here is a demo.HTML\[code\]<div class='range_container'> 1<input type="range" name="points" min="1" max="10" value='http://stackoverflow.com/questions/14481393/5'>10 <div class='range_value_display'>5</div></div>\[/code\]CoffeeScript\[code\]($ "input[type='range']").each (i) -> initial_value = http://stackoverflow.com/questions/14481393/($ this).val() radio_name = Math.random().toString(36).substr(2, 5) start_value = http://stackoverflow.com/questions/14481393/parseInt(($ this).attr('min')) end_value = http://stackoverflow.com/questions/14481393/parseInt(($ this).attr('max')) for option_number in [start_value..end_value] opts = "#{if opts then opts else ''}<input type='radio' name='#{radio_name}' value='http://stackoverflow.com/questions/14481393/#{option_number}'#{if option_number is parseInt(initial_value) then ' checked' else ''}>#{option_number}" ($ this).closest('.range_container').replaceWith ($ opts)\[/code\]JavaScript\[code\]($("input[type='range']")).each(function(i) { var end_value, initial_value, option_number, opts, radio_name, start_value, _i; initial_value = http://stackoverflow.com/questions/14481393/($(this)).val(); radio_name = Math.random().toString(36).substr(2, 5); start_value = http://stackoverflow.com/questions/14481393/parseInt(($(this)).attr('min')); end_value = http://stackoverflow.com/questions/14481393/parseInt(($(this)).attr('max')); for (option_number = _i = start_value; start_value <= end_value ? _i <= end_value : _i >= end_value; option_number = start_value <= end_value ? ++_i : --_i) { opts = "" + (opts ? opts : '') + "<input type='radio' name='" + radio_name + "' value='" + option_number + "'" + (option_number === parseInt(initial_value) ? ' checked' : '') + ">" + option_number; } return ($(this)).closest('.range_container').replaceWith($(opts));});\[/code\]What is going wrong?
 
Back
Top