core/forms/range.component.ts
A component to render a range slider in Cumulocity UI. You need to wrap the default range
input in this component, then use one of the four available options for the value display mode:
pop, start, end, and inline
<c8y-range valueDisplayMode="inline">
<input id="range" type="range" min="0" max="100000" value="0" step="1">
</c8y-range>
OnDestroy
ControlValueAccessor
| providers |
{
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RangeComponent), multi: true
}
|
| selector | c8y-range |
| templateUrl | ./range.component.html |
Properties |
Methods |
Inputs |
| valueDisplayMode |
Type : "pop" | "inline" | "end" | "start"
|
Default value : 'inline'
|
|
Value display mode, available options: |
| updatePosition |
updatePosition()
|
|
Updates the position of the slider
Returns :
void
|
| left |
Type : string
|
|
The current position of the tooltip from left |
| range |
Type : RangeDirective
|
Decorators :
@ContentChild(RangeDirective, {static: true})
|
|
The range input |
| rangeValue |
Type : TemplateRef<>
|
Decorators :
@ContentChild('c8yRangeValue', {static: true})
|
|
The range value slider |
| value |
Type : number
|
|
The current value. |
<div
class="range-wrap"
[ngClass]="valueDisplayMode"
style="--track-width: {{ left }}"
>
<div
class="range-value"
[style.left]="left"
>
<span *ngIf="!rangeValue">{{ value }}</span>
<ng-container *ngTemplateOutlet="rangeValue"></ng-container>
</div>
<ng-content></ng-content>
</div>