ngx-knob

NgxKnob

NgxKnob is an Angular component that provides a knob controller allowing users to adjust values within a specified range. This component supports both mouse and touch interactions and can be easily integrated into Angular projects.

Live Demo

Features

• Adjustable Value: Allows users to change the value between a minimum and maximum range using mouse or touch.
• Form Integration: Can be used with Angular forms as a ControlValueAccessor.
• Validation Support: Supports validation of input values.

Installation

To install the library, use npm:

npm install ngx-knob --save

Usage

Importing the Module

First, add the NgxKnobModule to your Angular module:

import { NgxKnobModule } from 'ngx-knob';

@NgModule({
  imports: [
    NgxKnobModule,
    // other modules
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Using in a Template

Use the ngx-knob component in your template as follows:

<ngx-knob [min]="0" [max]="100" [(ngModel)]="value" title="HEATING"></ngx-knob>

Component Setup

In your component, define the value property:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  value = 50;
}

Inputs and Outputs

Inputs

Input	Type	Default	Description
title	string	'HEATING'	The title displayed above the knob.
min	number	0	The minimum value that the knob can represent.
max	number	100	The maximum value that the knob can represent.
value	number	0	The current value of the knob.
colorRanges	IColorRange	[ { "color": "#985EE1" }, { "color": "#F25656" } ]	The color range3

Outputs

Output	Type	Description
change	EventEmitter<number>	Emits the new value whenever the knob's value changes.

Example

Here is a complete example of how to use the ngx-knob component:

<ngx-knob [min]="0" [max]="100" [(ngModel)]="value" title="HEATING"></ngx-knob>
<p>Value: {{ value }}</p>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  value = 50;
}

Development and Contribution

If you want to contribute to this library, you can clone the repository and make your changes:

git clone https://github.com/mr-samani/ngx-knob.git
cd ngx-knob
npm install

Running Locally

To run the project locally and see your changes:

ng serve

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Author

💻Mohammadreza samani | FrontEnd Developer

❤️Buy me a coffee 😉