The HTML5 range input element is used when a user can choose between a min and a max value but the precise value chosen is not considered important.

Usage

The range input control allows the user to chose a value when they don’t care (or know) what the specific number value chosen is. This is an imprecise input control that should only be used when the exact value is not important for the user to know. Range controls work well when the users is more concerned with percent distance between the min and the max.

Code & Examples

The Range input uses standard HTML5 attributes and can be used with Clarity forms.

Basic

Favorite temperature

<clr-range-container>
  <label>Favorite temperature</label>
  <input type="range" clrRange min="60" max="80" />
</clr-range-container>

Full Example

Full example

Helper text

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

Disabled

Disabled

Helper text

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

Value Changes

Applications may need to be aware of the current slider value. They can use the standard Angular (change) output to handle changes to the slider value.