angularnouislider

Angular 5 nouislider with two inputs

I want to achieve below behavior on one of my personal projects which is written in angular 5. A slider which will have a specific range based on the data from a service. I tried to search a lot but couldn't find proper example which gives me a start point. Has anyone implemented such behavior in angular 5. Any help is greatly appreciated.

Trying to achieve

Solution

  • This is possible with ng2-nouislider and i have implemented in project as well.

    You just need to provide the range in config as follows,

    someRange2config: any = {
  behaviour: 'drag',
  connect: true,
  margin: 1,
  limit: 5, // NOTE: overwritten by [limit]="10"
  range: {
    min: 0,
    max: 20
  },
  pips: {
    mode: 'steps',
    density: 5
  }
};