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

demo-pic

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

Package detail