Angular Hour slider

An hour selector component for Angular (6)

Demo

Hosted by CloudFront, can be found here

Dependencies

  "peerDependencies": {
    "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
    "@angular/core": "^6.0.0-rc.0 || ^6.0.0",
    "d3": "^5.5.0",
    "moment-timezone": "^0.5.21"
  }

Installation

npm install --save d3 moment-timezone angular-hour-slider

Usage

Please use with Angular 6 only

App module

@NgModule({
    ...
    imports: [
        ...,
        AngularHourSliderModule,
        ...
    ],
    ...
})
export class AppModule {
}

Template

      <lib-angular-hour-slider
        [initialValueAsHours]="hours"
        [startHour]="0"
        [endHour]="12"
        [hoursBetweenTick]="2"
        [incrementMinutes]="15"
        (selectedValue)="handleOverrideValueSelected('remainingHoursOverride', $event)"
      >
      </lib-angular-hour-slider>

Properties

| Property | Description | Default Value | :--- | :--- | :--- | initialValueAsHours | The initial value as hours | 0 | startHour | The far left hour value | 0 | endHour | The far right hour value | 24 | hoursBetweenTick | The amount of hours between each tick value | 3 | incrementMinutes | The amount of minutes per slide transition | 30