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 AfterViewInit OnDestroy

Metadata

Selector input[eclRange]

Index

Methods
Inputs
Outputs
HostBindings
HostListeners
Accessors

Inputs

eclSize
Default value : 'm'

Defines the size of the range component. Adds a corresponding size class like ecl-range--m.
hasValueLabel
Default value : true, { transform: booleanAttribute }

Enables or disables the display of a value label.
isInvalid
Default value : false, { transform: booleanAttribute }

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 : EclRangeEvent

Emits when the range value changes.

HostBindings

class
Type : string
class.ecl-range--invalid
Type : boolean

HostListeners

input
Arguments : '$any($event)'

Handles native input events on the range element when not used with reactive forms.

Methods

onInput
onInput(evt: InputEvent)
Decorators :
@HostListener('input', ['$any($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()
invalidState
getinvalidState()

results matching ""

    No results matching ""