Search code examples
angularjsnouislider

NoUiSlider in angular - bind to array of numbers

I'm trying to do editor for array of numbers using NoUiSlider (Yankovsky directive)

I've managed to create basic functionality but I'm struggling with binding.

I have my array like this:

vm.myNumbers = [1, 2, 6];

but this directive requires option to be set as whole object:

vm.options = {
  start: 3,
  connect: 'lower',
  range: {
    min: 0,
    max: 10
  }
};

I'd like to create slider for each element of my array and automatically update it's value, something like on below picture.

enter image description here

Problem is NoUiSlider directive doesn't have standalone binding for value.

Here is Plunker showing my current code: http://plnkr.co/edit/ljm96tdcGgvwo3Hnayfk?p=preview

Can I bind items from my array but keep rest of options in that options object?

Solution

  • You may refer to this plunker code... http://plnkr.co/edit/4VgDnm You are binding same options to every slider, and hence getting issues. I have updated your code which may help you.