code: function colorRangeBox(selection, label) {
    selection
        .classed('form-row', true)
        .classed('form-group', true)
        .classed('align-items-center', true);
    selection.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 midBox = selection.append('div');
    midBox.append('label').text('mid');
    midBox.append('input').classed('mid', true);
  
    const maxBox = selection.append('div');
    maxBox.append('label').text('max');
    maxBox.append('input').classed('max', true);
  
    selection.on('change', () => {
      // avoid update by mousemove on the colorpicker
      d3.event.stopPropagation();
    });
  
    selection.selectAll('div')
        .classed('form-group', true)
        .classed('col-3', 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', 'color');
  }
docs: Render color scale box components
  @param {d3.selection} selection - selection of box container (div element)