Skip to content

[EuiRange] Support custom color options #4467

@darnautov

Description

@darnautov

At the moment only the following color options are supported: [ "primary", "success", "warning", "danger" ].
I presume it's been done this way to preserve the EUI color palette and respect the active theme, but for some scenarios, it's important to have the ability to set a specific color code. For instance, we would like slider ranges to match anomaly security score colors: '#fe5050', '#fba740', '#fdec25', '#8bc8fb'.

image

As a temporary workaround, I had to set the following overrides in scss

.mlSeverityControl {
  .euiRangeLevel-- {
    &success {
      background-color: #8BC8FB;
    }
    &primary {
      background-color: #FDEC25;
    }
    &warning {
      background-color: #FBA740;
    }
    &danger {
      background-color: #FE5050;
    }
  }
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions