### 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
el isVisible left value
###### Methods
getCssClasses
###### Inputs
class e2eAttr tabindex
###### HostBindings
class style.left.px
###### Accessors
leftBinding cssClasses

### Inputs

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 : `any`

### Methods

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

### Properties

el
Type : `unknown`
Default value : `inject(ElementRef)`

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

left
Type : `unknown`
Default value : `signal<number>(0)`
Horizontal offset in pixels for positioning the bubble. Applied as the left style property of the host element.

value
Type : `unknown`
Default value : `signal<number>(0)`
Value displayed inside the bubble.

### Accessors

leftBinding
get `leftBinding()`

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