@ascenda/ngx-slider

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:

param	description	default
floor	minimal value that can be reached	0
ceil	maximal value that can be reached	100
step	how precise is the slider (absolute value will be used)	1
minValue	initial minValue pointer value, if provided (not null/undefined), the slider will become a double slider with 2 pointers automatically	N/A
value	represent initial value pointer value if minValue provided, otherwise represent initial pointer value for single slider	value of ceil if minValue provided, otherwise value of floor
labelPosition	position of pointer label, support 'top' or 'bottom'	'top'
isRtl	If true, the slider will display from right to left, with minValue pointer and floor on the right, value pointer and ceil on the left	false
minValueLabel	callback function that returns the formatted content of minValue label (raw HTML accepted)	(minValue: number): string => `${minValue}`
valueLabel	callback function that returns the formatted content of value label (raw HTML accepted)	(value: number): string => `${value}`
minValueAriaLabel	callback function that returns the custom content of minValue pointer aria-label	(minValue: number): string => `Slider minimum value pointer of value ${minValue}`
valueAriaLabel	callback function that returns the custom content of value pointer aria-label	When double slider: (value: number): string => `Slider maximum value pointer of value ${value}` When single slider: (value: number): string => `Slider pointer of value ${value}`
valueAriaLabel	position of pointer label, support 'top' or 'bottom'	'top'

Output events

event	description
minValueChange	emit value of slider minimum value pointer whenever changed, if it's a single slider, no value will be emitted
valueChange	emit value of slider maximum value pointer (for double slider), or value of slider pointer for single slider

Authors

• @yidingww
• @nhducit