Forms Support

You can use the RangeSlider in template-driven or reactive forms.

Template-Driven Forms

The template-driven forms enable you to bind the value of the Slider to the forms model by using the ngModel directive.

The following example demonstrates how to use the RangeSlider in a template-driven form.

Example
View Source
Edit In Stackblitz  
Change Theme:

Reactive Forms

The FormGroup provides a way to render reactive forms. For more details, refer to the Angular Documentation.

The following example demonstrates how to use the RangeSlider in a reactive form.

Example
View Source
Edit In Stackblitz  
Change Theme:

FormField Association

The following example demonstrates how to use the RangeSlider within a FormField component and provide hint and error messages.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?