# EclRangeDirective

**Type:** directive



Directive enhancing native input[type=range] with ECL styles and behavior.
Adds value display, bubble indicator, RTL support and integration with reactive forms.


**Selector:** `input[eclRange]`

## Inputs
- **eclSize**: `string` - Defines the size of the range component. Adds a corresponding size class like `ecl-range--m`.
- **hasValueLabel**: `boolean` - Enables or disables the display of a value label.
- **isInvalid**: `boolean` - Adds the `ecl-range--invalid` class when true.
- **rangeValueId**: `string` - ID assigned to the projected ECL range value component.
- **value**: `string` - Initial value for the range input when used standalone.
- **class**: `string` - 
- **e2eAttr**: `any` - 
- **tabindex**: `number` - 

## Outputs
- **rangeChange**: `EventEmitter` - Emits when the range value changes.
