Height Picker

by sperske

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.js"></script>
<form>
  <div class="form-group">
    <label for="GuestCount">Guests</label>
    <select class="form-control" id="GuestCount">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div id='Canvas'>
  
  </div>
</form>

JavaScript

var makeSlider = function (id) {
  return "<div class='form-group'>"+
           "<label>Height (<span class='height"+"'>4' 2\" or 50 inches</span>)</label><br/>"+
           "<input id='"+id+"' data-slider-id='"+id+"Slider' type='text' data-slider-min='0' data-slider-max='80' data-slider-step='1' data-slider-value='50'/>"+
         "</div>"
}

$('#GuestCount').on('change', function () {
  var size = $(this).val()
  console.log(size)
  var heights = $('#Canvas')
  heights.empty()
  for (var i = 0; i < size; i++) {
  	heights.append(makeSlider('guest_'+i))
    $('#guest_'+i).slider()
    $('#guest_'+i).on("slide", function (e) {
      var totalInches = e.value
      var feet = Math.floor(totalInches / 12)
      var inches = totalInches - (feet*12)
    	$(".height", $(e.target).parent()).text(feet + "' "+inches+"\" or " + totalInches +" inches")
    })
  }
}).trigger('change')