code: function colorRangeGroup(selection, colorScales) {
    selection
        .classed('mb-3', true);
    selection.append('div')
        .classed('colorscale', true)
        .classed('mb-2', true)
        .call(lbox.colorScaleBox, 'Colorscale')
        .call(lbox.colorScaleBoxItems, colorScales);
  
    // Custom colorscale
    const collapse = selection.append('div')
        .call(dropdown.dropdownFormGroup, 'Custom color')
      .select('.card-body')
        .classed('p-2', true);
  
    const customColorRanges = [
      {key: 'continuous', name: 'Continuous'},
      {key: 'two-piece', name: 'Two-piece'}
    ];
    collapse.append('div')
        .classed('rangetype', true)
        .classed('mb-1', true)
        .call(lbox.selectBox, 'Range type')
        .call(lbox.updateSelectBoxOptions, customColorRanges);
    collapse.append('div')
        .classed('range', true)
        .classed('mb-1', true)
        .call(rbox.colorRangeBox, 'Range');
    collapse.append('div')
        .classed('unknown', true)
        .classed('mb-1', true)
        .call(box.colorBox, 'Unknown');
  }
docs: Render color range control box group
  @param {d3.selection} selection - selection of box container (div element)