### File

`packages/ecl/components/ecl-range/ecl-range-bubble.component.ts`

### Description

Component representing a bubble tooltip shown above a range input, used to display the current value with ECL styling.

### Extends

`ECLBaseDirective`

### Metadata

selector | `ecl-range-bubble`
templateUrl | `./ecl-range-bubble.component.html`

### Index

###### Properties
Public el isVisible left
###### Methods
getCssClasses
###### Inputs
value class e2eAttr tabindex
###### HostBindings
class style.left.px
###### Accessors
cssClasses

### Constructor

`constructor(el: ElementRef)`
Reference to the host DOM element. Parameters :
Name | Type | Optional
el | `ElementRef` | No

### Inputs

value
Type : `number`
Value displayed inside the bubble.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### HostBindings

class
Type : `string`
Returns the CSS classes applied to the host element. Always includes `ecl-range__bubble` and optionally adds the visible modifier.

style.left.px
Type : `number`
Horizontal offset in pixels for positioning the bubble. Applied as the left style property of the host element.

### Methods

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

### Properties

Public el
Type : `ElementRef`

isVisible
Default value : `false`
Controls the visibility of the bubble. Adds the `ecl-range__bubble--visible` class when true.

left
Type : `number`
Decorators : `@HostBinding('style.left.px')`
Horizontal offset in pixels for positioning the bubble. Applied as the left style property of the host element.

### Accessors

cssClasses
get `cssClasses()`
Returns the CSS classes applied to the host element. Always includes `ecl-range__bubble` and optionally adds the visible modifier. Returns : `string`

# results matching ""

# No results matching ""