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.
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?