How I can customize my pips label to have string values?

[aishwaryagarg]

I want my ticks labels to have value ["abc","pqr","xyz"] instead of [1,2,3]. I tried using format option but its helpful to format the numeric value. we are not able to entirely format the label into alphabetic string.

[kiqq]

I hope this code will help You:

<nouislider [config]="sliderConfig"></nouislider>

public sliderConfig: any = {
    connect: true,
    start: 3,
    step: 1,
    range: {
      'min': [-3],
      'max': [10]
    },
    pips: {
      mode: 'steps',
      density: 3,
      format: new MyFormatter()
    }
  };

import { NouiFormatter } from "ng2-nouislider/src/nouislider";

export class MyFormatter implements NouiFormatter {
  private strings: string[] = [
    'abc', 'dfg', 'hij', 'klm', 'nop', 'qrs', 'tuv', 'wxy', 'z'
  ];

  to(value: number): string {
    value = Math.round(value);
    if (value < 0) {
      value = 0;
    }
    if (value >= this.strings.length) {
      value = this.strings.length - 1;
    }
    return this.strings[value];
  }

  from(value: string): number {
    let result = this.strings.indexOf(value);
    return result == -1 ? 0 : result;
  }
}

[duahimanshu100]

@kiqq How can i add custom images instead of string values. Please help

[WebmasterRF]

Cool, I got this to work.

A better example of this needs to be added to the site. This is a very important feature.

For anybody needing a JS example:

var pipFormats = {'0':'abc', '1':'pqr', '2':'xyz'}; noUiSlider.create(slider, { range: { 'min': [0, 1], '50%': [1,1], 'max': [2,1] } pips: { mode: 'range', format: { to: function(a){ return pipFormats[a]; } } } }

[SnisarOnline]

but this answer valid only static array

[mojtabadarzi]

cant get this working with dynamic array .

import { NouiFormatter } from "ng2-nouislider/src/nouislider";

export class MyFormatter implements NouiFormatter {
    constructor(formaterArray) {
        this.strings =formaterArray;
    }
  private strings: string[];

  to(value: number): string {
    value = Math.round(value);
    if (value < 0) {
      value = 0;
    }
    if (value >= this.strings.length) {
      value = this.strings.length - 1;
    }
    return this.strings[value];
  }

  from(value: string): number {
    let result = this.strings && this.strings.indexOf(value);
    return result == -1 ? 0 : result;
  }
}

> 

//using this function to create my config object
createSliderConfig (formaterArray , range) {
    return  {
      behaviour: 'tap',
      connect: true,
      start: [1],
      handle : 1,
      step:1,
      keyboard: true,  // same as [keyboard]="true"

      pageSteps: 10,  // number of page steps, defaults to 10
      range: {
        min: range[0],
        max: range[1]
      },
      pips: {
        mode: 'count',
        density: 20,
        values: 10,
        stepped:true,
        format:new MyFormatter(formaterArray)
      }
    };
  }`

I'm getting this error when running the code  

Cannot read property 'from' of undefined  at NouisliderComponent.toValues (nouislider.js:169)