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.