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:

• Demo (GitHub Pages)
• Demo (StackBlitz)
• NPM package

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