+++
# -----------------------------------------------------------------------
# Do not edit this file. It is automatically generated by API Documenter.
# -----------------------------------------------------------------------
title = "ThresholdsEditor"
keywords = ["grafana","documentation","sdk","@grafana/ui"]
type = "docs"
draft = true
+++

## ThresholdsEditor class

<b>Signature</b>

```typescript
export declare class ThresholdsEditor extends PureComponent<Props, State> 
```
<b>Import</b>

```typescript
import { ThresholdsEditor } from '@grafana/ui';
```
<b>Constructors</b>

|  Constructor | Modifiers | Description |
|  --- | --- | --- |
|  [constructor(props)](#constructor-props) |  | Constructs a new instance of the <code>ThresholdsEditor</code> class |

<b>Properties</b>

|  Property | Modifiers | Type | Description |
|  --- | --- | --- | --- |
|  [onAddThresholdAfter](#onaddthresholdafter-property) |  | <code>(threshold: ThresholdWithKey) =&gt; void</code> |  |
|  [onBlur](#onblur-property) |  | <code>() =&gt; void</code> |  |
|  [onChange](#onchange-property) |  | <code>() =&gt; void</code> |  |
|  [onChangeThresholdColor](#onchangethresholdcolor-property) |  | <code>(threshold: ThresholdWithKey, color: string) =&gt; void</code> |  |
|  [onChangeThresholdValue](#onchangethresholdvalue-property) |  | <code>(event: React.ChangeEvent&lt;HTMLInputElement&gt;, threshold: ThresholdWithKey) =&gt; void</code> |  |
|  [onModeChanged](#onmodechanged-property) |  | <code>(item: SelectableValue&lt;ThresholdsMode&gt;) =&gt; void</code> |  |
|  [onRemoveThreshold](#onremovethreshold-property) |  | <code>(threshold: ThresholdWithKey) =&gt; void</code> |  |
|  [renderInput](#renderinput-property) |  | <code>(threshold: ThresholdWithKey) =&gt; JSX.Element</code> |  |

<b>Methods</b>

|  Method | Modifiers | Description |
|  --- | --- | --- |
|  [render()](#render-method) |  |  |

### constructor(props)

Constructs a new instance of the `ThresholdsEditor` class

<b>Signature</b>

```typescript
constructor(props: Props);
```
<b>Parameters</b>

|  Parameter | Type | Description |
|  --- | --- | --- |
|  props | <code>Props</code> |  |

### onAddThresholdAfter property

<b>Signature</b>

```typescript
onAddThresholdAfter: (threshold: ThresholdWithKey) => void;
```

### onBlur property

<b>Signature</b>

```typescript
onBlur: () => void;
```

### onChange property

<b>Signature</b>

```typescript
onChange: () => void;
```

### onChangeThresholdColor property

<b>Signature</b>

```typescript
onChangeThresholdColor: (threshold: ThresholdWithKey, color: string) => void;
```

### onChangeThresholdValue property

<b>Signature</b>

```typescript
onChangeThresholdValue: (event: React.ChangeEvent<HTMLInputElement>, threshold: ThresholdWithKey) => void;
```

### onModeChanged property

<b>Signature</b>

```typescript
onModeChanged: (item: SelectableValue<ThresholdsMode>) => void;
```

### onRemoveThreshold property

<b>Signature</b>

```typescript
onRemoveThreshold: (threshold: ThresholdWithKey) => void;
```

### renderInput property

<b>Signature</b>

```typescript
renderInput: (threshold: ThresholdWithKey) => JSX.Element;
```

### render method

<b>Signature</b>

```typescript
render(): JSX.Element;
```
<b>Returns:</b>

`JSX.Element`