@ascenda/ngx-slider v1.0.0

ngx-slider

Angular slider component developed by Ascenda Loyalty

Usage/Examples

Import the module

import { NgxSliderModule } from '@ascenda/ngx-slider';

@NgModule({
  imports: [NgxSliderModule],
  declarations: [AppComponent],
})
export class AppModule {}

Use it in Components

• single slider (no range)

import { Component } from '@angular/core';
import { Options } from '@ascenda/ngx-slider';

@Component({
  selector: 'app',
  template: `
    <ascenda-ngx-slider
      [options]="sliderOptions"
      (valueChange)="logValue($event)"
    ></ascenda-ngx-slider>
  `,
})
export class AppComponent {
  sliderOptions: Options = {
    floor: 0,
    ceil: 50,
    value: 20,
    step: 2,
  };

  logValue(event: number) {
    console.log(event); // initially will log value 20
  }
}

• range slider

import { Component } from '@angular/core';
import { Options } from '@ascenda/ngx-slider';

@Component({
  selector: 'app',
  template: `
    <ascenda-ngx-slider
      [options]="sliderOptions"
      (minValueChange)="logMinValuePointerValue($event)"
      (valueChange)="logValuePointerValue($event)"
    ></ascenda-ngx-slider>
  `,
})
export class AppComponent {
  sliderOptions: Options = {
    floor: 0,
    ceil: 1,
    minValue: 0.2,
    value: 0.8,
    step: 0.05,
  };

  logMinValuePointerValue(event: number) {
    console.log(event); // initially will log value 0.2
  }

  logValuePointerValue(event: number) {
    console.log(event); // initially will log value 0.8
  }
}

Input parameter: options

options input parameter is of type Options which can be imported from library via import { Options } from '@ascenda/ngx-slider'

Below are the parameters provided in Options:

Output events

Authors

• @yidingww
• @nhducit