### File

`packages/ecl/components/ecl-range/ecl-range.directive.ts`

### Description

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

### Extends

`ECLBaseDirective`

### Implements

`OnInit` `OnDestroy`

### Metadata

Selector | `input[eclRange]`

### Index

###### Methods
onInput getCssClasses
###### Inputs
eclSize hasValueLabel isInvalid rangeValueId value class e2eAttr tabindex
###### Outputs
rangeChange
###### HostBindings
class class.ecl-range--invalid
###### HostListeners
input
###### Accessors
cssClasses invalidState

### Constructor

`constructor(viewContainerRef: ViewContainerRef, el: ElementRef, eclRtlService: EclRtlService, cd: ChangeDetectorRef, ngControl: NgControl)`
Parameters :
Name | Type | Optional
viewContainerRef | `ViewContainerRef` | No
el | `ElementRef` | No
eclRtlService | `EclRtlService` | No
cd | `ChangeDetectorRef` | No
ngControl | `NgControl` | No

### Inputs

eclSize
Type : `string`
Default value : `'m'`
Defines the size of the range component. Adds a corresponding size class like `ecl-range--m`.

hasValueLabel
Type : `boolean`
Default value : `true`
Enables or disables the display of a value label.

isInvalid
Type : `boolean`
Default value : `false`
Adds the `ecl-range--invalid` class when true.

rangeValueId
Type : `string`
ID assigned to the projected ECL range value component.

value
Type : `string`
Initial value for the range input when used standalone.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

rangeChange
Type : `EventEmitter`
Emits when the range value changes.

### HostBindings

class
Type : `string`
Returns the CSS classes applied to the host element.

class.ecl-range--invalid
Type : `boolean`
Returns whether the component is in an invalid state. Checks reactive form control if available, or uses `isInvalid` input.

### HostListeners

input
Arguments : `'$event'`
Handles native input events on the range element when not used with reactive forms.

### Methods

onInput
`onInput(evt: InputEvent)`
Decorators : `@HostListener('input', ['$event'])`
Handles native input events on the range element when not used with reactive forms. Parameters :
Name | Type | Optional
evt | `InputEvent` | No
Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Accessors

cssClasses
get `cssClasses()`
Returns the CSS classes applied to the host element. Returns : `string`

invalidState
get `invalidState()`
Returns whether the component is in an invalid state. Checks reactive form control if available, or uses `isInvalid` input. Returns : `boolean`

# results matching ""

# No results matching ""