core/forms/range.component.ts

Description

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

Example :

<c8y-range valueDisplayMode="inline">
  <input id="range" type="range" min="0" max="100000" value="0" step="1">
</c8y-range>

Implements

OnDestroy ControlValueAccessor

Example

Metadata

providers	`)`
selector	`c8y-range`
standalone	`true`
imports	`NgClass` `NgIf` `NgTemplateOutlet`
templateUrl	`./range.component.html`

Relationships

Used by

FormsModule

Depends on

NgClass
NgIf
NgTemplateOutlet
)
OnDestroy
ControlValueAccessor

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