angular-circular-slider

Installation

To install this library, run:

$ npm install angular-circular-slider --save

Consuming the library

Install

$ npm install angular-circular-slider --save

and then import in Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
// Import the library
import { CircularSliderModule } from 'angular-circular-slider';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
 
    // Specify library as an import
    CircularSliderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the library is imported, you can use it as a component in your Angular application:

<!-- You can now use your library component in app.component.html -->
<app-circular-slider 
    [progress]='progress' 
    [total]='100' 
    [startingAngle]='15' 
    [endingAngle]='345' 
    [grooveColor]="'#68696A'" 
    [grooveWidth]='6' [progressWidth]='4' 
    [backgroundColor]="'#333333'" 
    [handleWidth]='1.5'
    [progressColor]="'#33B5E5'" 
    (onProgressChanged)='setprogress($event)'>
</app-circular-slider>

License

MIT © Naveen Krishnan R