how to fit button to jquery-ui slider

Question

I want to add some function into jquery-ui slider. So when I click the space of the slider, I want to trigger some function. Now when I click the space of the slider, it set the nearest handler. So I added button to the slider. When I add a new handler, I could add a new button on top of the slider. The problem now is how to set the width and left of the button to make it clickable. The jsfiddle is here:

http://jsfiddle.net/5ycu91hj/

The picture is here:

what I want to implement is click different space between handlers I can trigger different functions.

<button style="left:10% width: 20%;height:inherit;position:absolute"></button>

I'm not sure whether there're better solution to this. As I checked the jquery-ui api but didn't see any click function that I can use.

Answer 1

Not exactly sure what you're asking, but here's an attempted answer:

To call a function on click, you can use the onClick() event.

<button style="left:10% width:20%; height:inherit; position:absolute" 
    onClick="myFunction()"></button>

Then you can pass arguments to your function with the position of your mouse, the value(s) of your sliders (see "value"), and do some simple math to figure out which "space" you're in.

EDIT: Didn't notice you were using angular - that will probably make this even easier! You can use ng-click="myFunction() and then possibly use some two-way data-binding, depending on what you want to do in your function.