Angular Components

ClrRange

Selector & Basic Usage

<form clrForm>
  <clr-range-container [clrRangeHasProgress]="true">
    <label>Full example</label>
    <input type="range" clrRange [(ngModel)]="input.two" name="three" />
    <clr-control-helper>Helper text</clr-control-helper>
  </clr-range-container>
</form>

Bindings

Binding	Type	Options	Default	Description
[min]	input	-50, 0, 50	0	The maximum value of the range.
[max]	input	100, 200, 500	100	The minimum value of the range..
[step]	input	1, 2, 5, 10 ...		Specify the granularity of the range..
[value]	input	0,1,2,3,4...	0 or the min value set for the range.	The current value of the range.
[clrRangeHasProgress]	input	true, false	false	Show the percentage of the range below thecurrent value..

Binding	Type	Options	Default	Description
[(ngModel)]	two-way	model.property	0	From the Angular forms API.
[formControlName]	input	any	n/a	From the Angular forms API.
[disabled]	input	true, false	null	From the Angular forms API.
[name]	input	Valid HTML name	null	From the Angular forms API.
[validator]	input	ValidatorFn		From the Angular forms API.