Add support for more events

[ahc2483]

Add support for more events

[enodyt]

slider-ui depends and provides (an empty) uiSliderConfig service.

You can configure your sliders by providing an uiSliderConfig service with your app:

app.factory('uiSliderConfig', function ($log) {
  return {
    start: function (ev, ui) { $log.info(ev, ui); },
    stop: function (ev, ui) { $log.info(ev, ui); }
  };
});

Alternatively you can setup the slider by setting the options on the ui-slider attribute in your template:

<div ui-slider="slider.options" ng-model="slider.val"></div>

and in your controller:

app.controller('AppCtrl', function ($scope, $log) {
  $scope.slider = {
    val: 0,
    options: {
      change: function (ev, ui) { $log.info($scope.slider.val); }
    }
  }
});

If we wanted to apply the handler functions directly to the directives scope we would have to enhance the setup implementation a little bit:

var options = angular.extend(/* ... */);
angular.forEach(options, function (value, key) {
  if (angular.isFunction(value)) {
    options[key] = function (ev, ui) {
      return value.apply(this, [ev, ui, scope]);
    }
  }
});

Not sure about that – just started playing with angular, maybe there's a better way passing the scope to event handlers – however we would then be able to do something like this:

app
  .value('uiSliderConfig', {
    change: function (ev, ui, scope) {
      console.log(scope.calc.something());
    }
  }
  .controller('appCtrl', function ($scope) {
    $scope.calc = {
      something: function () {
        console.log('beep');
      }
    }
  });

[johnparn]

As @enodyt wrote you can register events, for example start and stop events, by passing the event callbacks using the ui-slider config. Here's a plunker demonstrating that:

http://embed.plnkr.co/FtIl5zVSeII6VRTKOuF7/

In this example the slider is setup with the following markup:

<div ui-slider="{start: sliderStart, stop: sliderStop}"  min="0" max="20" step="2" ng-model="sliderValue"></div>

sliderStart and sliderStop are both functions available declared in the controller. For example:

$scope.sliderStart = function(event, ui) {
    console.log('Event started at ', new Date());
    console.log(event);
}

$scope.sliderStop = function(event, ui) {
    console.log('Event stopped at ', new Date());
    console.log(event);
}

// John

[kencaron]

@enodyt Thanks, that explanation definitely helped & worked for me in lieu of documentation.

[arambert]

maybe this could be useful : #104