ngx-circular-slider

powered by craftworks GmbH used in the own TimeTracking Product

inspired by iOS bedtime and react-native-circular-slider

Demo

check out the repo on stackblitz: demo

Installation

To install this the slider, run:

npm install ngx-circular-slider --save

Consuming your ngx-circular-slider

You can import the slider in any Angular application by running:

npm install ngx-circular-slider

and then from your Angular AppModule:

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

Once the ngx-circular-slider module is imported, you can use it in your Angular application:

<!-- You can now use the slider in app.component.html -->
 
<ngx-cs-slider (update)="handleSliderChange($event)"
               [props]="sliderProps"
               [startAngle]="start"
               [angleLength]="length">

API

• startAngle [number] - required the angle of the circle where the slider starts
• angleLength [number] - required the length of the circum-radius for the slider
• update [$event({angleLength: number; startAngle: number;})] - the handler for the update event which returns the angleLength and the startAngle after the slider was changed
• props [IProps] - the properties for the slider.

interface IProps {
  segments?: number;
  strokeWidth?: number;
  radius?: number;
  gradientColorFrom?: string;
  gradientColorTo?: string;
  bgCircleColor?: string;
  showClockFace?: boolean;
  clockFaceColor?: string;
}

todos

• test module api
• adapt readme
• replace gulp with webpack
• generate types without *.d.ts
• fixes module-api
• tests

Development

Use angular-cli tools to generate, test and lint your code. Put your library code in src/app/library folder. Only this folder and subfolders will be published.

To generate library's *.js, *.d.ts and *.metadata.json files:

npm version patch|minor|major
npm run publish dist

To generate the doc:

npm run docs

License

MIT © Alexander Zulechner@craftworks GmbH