src/component/formRangeBox.js
function rangeBox(selection, label) {
  selection
      .classed('form-row', true)
      .classed('form-group', true)
      .classed('align-items-center', true)
    .append('div')
      .classed('col-form-label', true)
      .classed('col-form-label-sm', true)
      .text(label);

  const minBox = selection.append('div');
  minBox.append('label').text('min');
  minBox.append('input').classed('min', true);

  const maxBox = selection.append('div');
  maxBox.append('label').text('max');
  maxBox.append('input').classed('max', true);

  selection.selectAll('div')
      .classed('form-group', true)
      .classed('col-4', true)
      .classed('mb-0', true);

  selection.selectAll('label')
      .classed('col-form-label', true)
      .classed('col-form-label-sm', true)
      .classed('py-0', true);

  selection.selectAll('input')
      .classed('form-control', true)
      .classed('form-control-sm', true)
      .attr('type', 'number');

  selection.append('div')
      .classed('col-4', true);
  selection.append('div')
      .call(badge.invalidFeedback)
      .classed('col-8', true);
}
function rangeBox(selection, label) {
  selection
      .classed('form-row', true)
      .classed('form-group', true)
      .classed('align-items-center', true)
    .append('div')
      .classed('col-form-label', true)
      .classed('col-form-label-sm', true)
      .text(label);

  const minBox = selection.append('div');
  minBox.append('label').text('min');
  minBox.append('input').classed('min', true);

  const maxBox = selection.append('div');
  maxBox.append('label').text('max');
  maxBox.append('input').classed('max', true);

  selection.selectAll('div')
      .classed('form-group', true)
      .classed('col-4', true)
      .classed('mb-0', true);

  selection.selectAll('label')
      .classed('col-form-label', true)
      .classed('col-form-label-sm', true)
      .classed('py-0', true);

  selection.selectAll('input')
      .classed('form-control', true)
      .classed('form-control-sm', true)
      .attr('type', 'number');

  selection.append('div')
      .classed('col-4', true);
  selection.append('div')
      .call(badge.invalidFeedback)
      .classed('col-8', true);
}
function rangeBox ( selection , label ) { selection . classed ( 'form-row' , true ) . classed ( 'form-group' , true ) . classed ( 'align-items-center' , true ) . append ( 'div' ) . classed ( 'col-form-label' , true ) . classed ( 'col-form-label-sm' , true ) . text ( label ) ; const minBox = selection . append ( 'div' ) ; minBox . append ( 'label' ) . text ( 'min' ) ; minBox . append ( 'input' ) . classed ( 'min' , true ) ; const maxBox = selection . append ( 'div' ) ; maxBox . append ( 'label' ) . text ( 'max' ) ; maxBox . append ( 'input' ) . classed ( 'max' , true ) ; selection . selectAll ( 'div' ) . classed ( 'form-group' , true ) . classed ( 'col-4' , true ) . classed ( 'mb-0' , true ) ; selection . selectAll ( 'label' ) . classed ( 'col-form-label' , true ) . classed ( 'col-form-label-sm' , true ) . classed ( 'py-0' , true ) ; selection . selectAll ( 'input' ) . classed ( 'form-control' , true ) . classed ( 'form-control-sm' , true ) . attr ( 'type' , 'number' ) ; selection . append ( 'div' ) . classed ( 'col-4' , true ) ; selection . append ( 'div' ) . call ( badge . invalidFeedback ) . classed ( 'col-8' , true ) ; }
Render range box components
@param {d3.selection} selection - selection of box container (div element)
Render range box components