@empathyco/x-components/docs/API-reference/api/x-components.editablenumberrangefilter.md

Empathy X Components

<!-- Do not edit this file. It is automatically generated by API Documenter. -->

[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [EditableNumberRangeFilter](./x-components.editablenumberrangefilter.md)

## EditableNumberRangeFilter variable

Renders an editable number range filter. It has two input fields to handle min and max values, emitting the needed events when clicked.

It provides a default slot, with some utils bind, to customize the whole component; and two named slots `apply-content` and `clear-content` to override each button content.

If `instant` prop is true, the needed events are emitted immediately; else, apply button is rendered to confirm to do it. False by default.

If `clear` prop is true, clear button, which sets to null component min and max values, is rendered. True by default.

**Signature:**

```typescript
_default: import("vue").DefineComponent<{
    filter: {
        type: PropType<EditableNumberRangeFilterModel>;
        required: true;
    };
    isInstant: BooleanConstructor;
    hasClearButton: {
        type: BooleanConstructor;
        default: boolean;
    };
    inputsClass: StringConstructor;
    buttonsClass: StringConstructor;
}, {
    rangeFilterMin: string;
    rangeFilterMax: string;
    cssClasses: import("vue").ComputedRef<{
        'x-editable-number-range-filter--error': boolean;
    }>;
    min: Ref<number | null>;
    max: Ref<number | null>;
    setMin: (value: number) => void;
    setMax: (value: number) => void;
    emitUserModifiedFilter: () => void;
    clearValues: () => void;
    hasError: import("vue").ComputedRef<boolean>;
    isAnyRange: import("vue").ComputedRef<boolean>;
    renderClearButton: import("vue").ComputedRef<boolean>;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    filter: {
        type: PropType<EditableNumberRangeFilterModel>;
        required: true;
    };
    isInstant: BooleanConstructor;
    hasClearButton: {
        type: BooleanConstructor;
        default: boolean;
    };
    inputsClass: StringConstructor;
    buttonsClass: StringConstructor;
}>>, {
    isInstant: boolean;
    hasClearButton: boolean;
}, {}>
```