eui documentation
  1. Directives
  2. EclRangeDirective

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
Inputs
Outputs
HostBindings
HostListeners
Accessors

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
getcssClasses()

Returns the CSS classes applied to the host element.

Returns : string
invalidState
getinvalidState()

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 ""