Question

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

<div class='range_container'>
    1<input type="range" name="points" min="1" max="10" value='5'>10
    <div class='range_value_display'>5</div>
</div>

CoffeeScript

($ "input[type='range']").each (i) ->
    initial_value = ($ this).val()
    radio_name = Math.random().toString(36).substr(2, 5)
    start_value = parseInt(($ this).attr('min'))
    end_value = 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='#{option_number}'#{if option_number is parseInt(initial_value) then ' checked' else ''}>#{option_number}"
    ($ this).closest('.range_container').replaceWith ($ opts)

JavaScript

($("input[type='range']")).each(function(i) {
    var end_value, initial_value, option_number, opts, radio_name, start_value, _i;
    initial_value = ($(this)).val();
    radio_name = Math.random().toString(36).substr(2, 5);
    start_value = parseInt(($(this)).attr('min'));
    end_value = 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));
});

What is going wrong?

Answer 1

The $ opts part is getting confused by the lack an outer element and just dropping the trailing bit of text. Try this out in your JS console:

$("<span/>5");

And notice there’s no 5 in the resulting jquery object. OTOH:

$("<div><span/>5</div>");

works fine. So you need to wrap the whole thing in some kind of container.

Your approach is also a bit confusing in general (progressively replacing the same bit of DOM). I also found it pretty hard to read because so much stuff is crammed into that input-creation line. Here’s what I’d do:

($ "input[type='range']").each (i) ->
  $this = $ this
  initial_value = parseInt($this.val())
  max = parseInt($this.attr 'max')
  min = parseInt($this.attr 'min')
  radio_name = Math.random().toString(36).substr(2, 5)
  $opts = $ '<span>'

  for option_number in [min..max]        
    input = $('<input>')
      .attr('type', 'radio')
      .attr('name', radio_name)
      .val(option_number)
    $opts
      .append(input)
      .append(option_number)
    input.attr("checked", true) if initial_value is option_number

  $this.closest('.range_container').replaceWith $opts

That feels a lot more readable to me. Also makes the “10” show up.