ngx-circular-slider

ngx-circular-slider inspired by iOS bedtime

Showing:

Popularity

Downloads/wk

141

GitHub Stars

18

Maintenance

Last Commit

1yr ago

Contributors

4

Package

Dependencies

13

Size (min+gzip)

2.7KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

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

License

MIT © Alexander Zulechner@craftworks GmbH

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100