0.4.0 • Published 3 years ago
ng-input-range v0.4.0
NgInputRange
ng-input-range
introduces combined <input type="number">
and <input type="range">
as single component, allows user
to set value or select from a range of values by moving the slider thumb benith input.
Links:
Component implements ControlValueAccessor
, MatFormFieldControl
therefore supports usage of Reactive Forms and
can/should be used inside mat-form-field
component
of MatFormFieldModule
Install
npm i ng-input-range
Update your Module dependencies with NgInputRangeModule
import {MatFormFieldModule} from "@angular/material/form-field";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {NgInputRangeModule} from "./ng-input-range.module";
@NgModule({
declarations: [MyComponent],
imports: [
FormsModule, // required if using "FormControl" and/or "FormGroup"
ReactiveFormsModule, // required if using "FormControl" and/or "FormGroup"
MatFormFieldModule,
NgInputRangeModule,
],
providers: [],
bootstrap: [MyComponent],
})
Usage
Using ng-input-range
with FormControl
// my-component.component.ts
formGroup: new FormGroup({
inputWithRange: new FormControl({ value: 0, disabled: false }),
});
<!-- my-component.component.html-->
<mat-form-field>
<ng-input-range
min="0"
max="256"
appearence="outline"
formControlName="inputWithRange"
></ng-input-range>
</mat-form-field>
Using ng-input-range
with data binding [value]="inputWithRangeValue"
// my-component.component.ts
public inputWithRangeValue = 128;
<!-- my-component.component.html-->
<mat-form-field>
<ng-input-range
min="0"
max="256"
appearence="outline"
[value]="inputWithRangeValue"
></ng-input-range>
</mat-form-field>
Theming
Plain CSS/SCSS
TBD
Angular Material
In the styles of the component where you include ng-input-range
you should pass your Angular Material Theme
@import '~ng-input-range/theme';
@include ng-input-range-theme(\$theme); #where \$theme is your angular-material theme
API references for Angular Material Input with Range component
Name | Description |
---|---|
@Input() color: ThemePalette | Theme color palette for the component. Supports "primary" , "accent" and "warn" |
@Input() disabled: boolean | Whether the component is disabled. |
@Input() max: number | The maximum value that the slider can have. |
@Input() min: number | The minimum value that the slider can have. |
@Input() step: number | The values at which the thumb will snap. |
@Input() value: number | Value of the input. |
@Output() change: Event | Emits value on input number/range change |