Ionic Range

The Ionic Range is a component that allows the user to select a value within a specified range. It presents a horizontal slider that can be moved between the minimum and maximum values to select a desired value.

Syntax

<ion-range [(ngModel)]="value" min="minValue" max="maxValue" [disabled]="isDisabled">
  <ion-icon range-left name="volume-low"></ion-icon>
  <ion-icon range-right name="volume-high"></ion-icon>
</ion-range>

Example

<ion-range [(ngModel)]="volume" min="0" max="100">
  <ion-icon range-left name="volume-low"></ion-icon>
  <ion-icon range-right name="volume-high"></ion-icon>
</ion-range>

Output

The output of the above example will be a horizontal range slider that the user can drag to select a value between 0 and 100. The slider will display icons at the left and right ends of the slider that correspond to the minimum and maximum values respectively. The selected value will be bound to the volume variable using two-way data binding.

Explanation

The ion-range component can be used to present a horizontal slider that allows the user to select a value within a range. The min and max attributes are used to specify the minimum and maximum values of the range, while the ngModel directive is used to bind the selected value to a variable in the component's TypeScript code.

The ion-icon components are used to display icons at the left and right ends of the slider, which can be used to represent the minimum and maximum values of the range.

The disabled attribute can be used to disable the range slider if needed.

Use

The Ionic Range is commonly used in applications that require the user to select a value within a range. It is often used in audio and video player applications to allow the user to adjust the volume level. It can also be used in applications that require the user to select a value within a specific range, such as selecting a time value for scheduling a task.

Important Points

• The min attribute specifies the minimum value of the range.
• The max attribute specifies the maximum value of the range.
• The ngModel directive can be used to bind the selected value to a variable.
• The ion-icon components can be used to display icons at the ends of the slider.
• The disabled attribute can be used to disable the range slider.
• The range slider can be customized using CSS.

Summary

The Ionic Range is a useful component that allows the user to select a value within a specified range. It presents a horizontal slider that can be customized using CSS and displays icons at the ends of the slider to indicate the minimum and maximum values of the range. The min and max attributes are used to specify the range boundaries, while the ngModel directive is used to bind the selected value to a variable in the component's TypeScript code. The range slider is commonly used in applications where the user needs to select a value within a specific range, such as audio and video player applications or scheduling applications.