[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [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; 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; max: Ref; setMin: (value: number) => void; setMax: (value: number) => void; emitUserModifiedFilter: () => void; clearValues: () => void; hasError: import("vue").ComputedRef; isAnyRange: import("vue").ComputedRef; renderClearButton: import("vue").ComputedRef; }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly; required: true; }; isInstant: BooleanConstructor; hasClearButton: { type: BooleanConstructor; default: boolean; }; inputsClass: StringConstructor; buttonsClass: StringConstructor; }>> & Readonly<{}>, { isInstant: boolean; hasClearButton: boolean; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any> ```