<div class="FormField__input">
  <div class="Slider">
    <div class="Slider__value"></div>
    <div class="Slider__control" data-config="<%= { start: @lesson_obj.teaching_range.present? ? @lesson_obj.teaching_range.to_a : [3,5], connect: true, step: 1, range: { min: -1, max: 12 }, unit: 'ordinal' }.to_json %>">
      <input type="hidden" name="lesson[teaching_range]" value="<%= @lesson_obj.teaching_range %>" />
    </div>
  </div>
</div>

<!-- TODO: need to set the default teaching range. Have just set { start: 1, end: 6 } to show how the
javascript sets the hidden input when the sliders move. This needs to be made dynamic. -->
<div class="FormField__input">
  <div class="Slider">
    <div class="Slider__value"></div>
    <div class="Slider__control" data-config="<%= { start: @lesson_obj.teaching_range.to_a : [3,5], connect: true, step: 1, range: { min: -1, max: 12 }, unit: 'ordinal' }.to_json %>">
      <input type="hidden" name="lesson[teaching_range]" value="{ start: 1, end: 6 }" />
    </div>
  </div>
</div>

Set a stringy json to show how the js sets this value
Set a stringy json to show how the js sets this value
