Angular range slider jQuery plugin

Question

I've been using this great slider on an Angular application http://refreshless.com/nouislider/download

Really like this slider as it's tiny compared to the jQuery UI Slider and has built in touch controls. It really is very nice.

So I created a directive which filters a data list and works well. What I need know though is a way to change the range values on the fly. So as data comes in, I get a new low and/or high value and update the range.

Here is a quick, basic Plunker of the directive I am using

http://plnkr.co/edit/VH2WvyJMsLSTpWJawT2f?p=preview

So not sure if this is an Angular thing, or a plugin thing. Could possibly instantiate the directive whenever I get a new value?

So would like to hear your thoughts.

Cheers Tom

Answer 1

Your best option would be to have the range of your slider as scope variable of your directive. Then listen for any changes that occur on this variable and update the slider.

This can be achieved with the following :

return {
  restrict: 'A',
  scope: {
    values: '=ngModel',
    boundaries : '=' // the range of the slider
  },

and then the part where you listen for changes :

scope.$watch('boundaries', function(oldVal, newVal) {
  if(scope.slider !== null) {
    remove();
  }
  create();
});

You can see a working example here

PS : Unfortunately there is no easy way to update the range of the noUiSlider. That's why I end up creating an inner div inside diretive's element.