This approach looks a lot cleaner... I like it :-)

+1 cleaner and neat!

can this also handle raw objects, usefull when few options are required:

rz-slider-options="{ floor: .5, ceil: 2}"

I was going to answer Nope, but after testing on the JSFiddle listed above, it does work! 😃 I thought it would fire an exception since the object passed to options is not updatable...
Actually, you can even use rz-slider-options="{ floor: myFloorVar}"!! This is magic! 😄I love Angular.

Hi, thanks for the slider! I am using this for a project at work.

Not sure if this is the right thread to post this, but I have resorted to hacking it a little to add the following:

• changing color for the selected part, so that for instance at 20% it's green and at 80% it's red
• adding bootstrap tooltips - this turned out to be ugly, I'm calling $('data-toggle="tooltip"]').tooltip(); at the end of updateTicksScale, as well as having all ticks inside div elements; I don't know why but the ticks and the corresponding tooltips "tremble" a bit when hovering over the ticks

Thanks!

Nope this is definitively not the correct place to post this! ^^ I have created an issue for the changing color.

For the tooltip, I actually added it yesterday to this PR. You can see it in the JSfiddle example (https://jsfiddle.net/h5udppp5/embedded/result/ at "Slider with ticks and values and tooltip")

This refactor removed the ability to call events with local scope variables, which was especially useful in directives like ngRepeat:

Before

<div ng-repeat="filter in vm.filters">
  <rzslider ... rz-slider-on-end="vm.onEnd(filter, $index)" />
</div>

After

<div ng-repeat="filter in vm.filters">
  <!--we can't pass custom local scope variables here-->
  <rzslider ... rz-slider-options="{ onEnd: vm.filterChanged }" />
</div>

I understand why this change was useful - when you get rid of directive attributes, the size of the DOM is reduced. But now the controller logic becomes heavier, because you have to generate the options using JavaScript. And not being able to pass local scope variables is a blocker for our use case.

Unless someone has an idea (other than invoking a function that returns a function), I think supporting both syntaxes would solve our issue. To reduce the performance load, you can only create scope watches if the attribute is present.

I understand your point. Can you open a dedicated issue so we can discussed there?

Just a quick idea, what if you use the id option?

<div ng-repeat="filter in vm.filters">
  <rzslider ... rz-slider-options="{ onEnd: vm.filterChanged, id: $index }" />
</div>

Then vm.filterChanged will be called with the correct index.

Actually, using a local object option like above was not the original idea so this is not the cleanest way. I know that this is not easy, but this change has changed the whole slider logic and you might rethink your implementation to use the whole power of this syntax. For instance, your vm.filters list could contain the sliders options (with id).

quick example: http://jsfiddle.net/qrk0vjxa/

That's what I ended up doing, I used the id option. It's an acceptable workaround, but I can see someone wanting to do something more complex.

If someone has a more complex issue, we'll see how we can handle it. But for now, I don't like the idea of re-adding all the attributes. I'm pretty sure that most of issues will be for people who were used to the old way and that new users won't have such problems since they will directly think with the new way in mind.

I'm using this library in a big project and I spent a couple of hours to update the library for all my views but now it feels cleaner and easier to reason about.