I like the idea because this is closer to the angular logic.

The main issue that I can see though is that today you can display html strings from the translate function and this won't work with your solution: https://jsfiddle.net/meu7ap6n/

About your 3 points:

1. the logic may not be to be changed, since we directly compute the size of the label
2. simply using a comboLabel bound on the scope should make the trick
3. how would you replace the translate function then?

@ValentinH Thanks for the quick reply.

The main issue that I can see though is that today you can display html strings from the translate function and this won't work with your solution

Actually that's what I tried first in order to achieve something like 2nd example in fiddle. One simple solution is using ng-bind-html in templates instead of {{..}}, probably with $compile if we allow angular directive to be passed. And supposing everything that can be done in translation option can easily done with rz-slider-tpl-url 's template with the selected values attached on the scope, it's better to let users specify only one of translation option or rz-slider-tpl-url option.

the logic may not be to be changed, since we directly compute the size of the label

That's good to hear :)

simply using a comboLabel bound on the scope should make the trick

Sorry didn't understand this. The problem I wanted to say here was that I can still click the opacity: 0-ed element even though it's invisible. Like this in the fiddle example:

how would you replace the translate function then?

Actually after some consideration, I think we better have translate option either way. If a user just need a slight change on label text, it'd be too much to force them to make whole another template file.

Actually after some consideration, I think we better have translate option either way. If a user just need a slight change on label text, it'd be too much to force them to make whole another template file.

This is exactly what I was going to say.

Sorry didn't understand this. The problem I wanted to say here was that I can still click the opacity: 0-ed element even though it's invisible. Like this in the fiddle example:

Oh ok, didn't understand then. Maybe adding a ng-show could do the job.

What I was thinking for my first answer was a slider that uses the mergeRangeLabelsIfSame option, then this line won't work. This is why I was talking about a comboLabel solution.

Anyway, could you submit a PR with what you have so far so we can discuss on the way to implement it? ;)

What I was thinking for my first answer was a slider that uses the mergeRangeLabelsIfSame option, then this line won't work. This is why I was talking about a comboLabel solution.

Ah okay I'll take care of that as well.

Anyway, could you submit a PR with what you have so far so we can discuss on the way to implement it? ;)

Yes I'll send it, just wanted to make sure before actually going deeper. Thank you :D

@ValentinH
Hey I need some help. Now using ng-html-bind and html strings in translation work well, but Combo label's position is broken. I read the logic for position calculation but wasn't that easy to grasp.

Here's the fiddle

and code change

About the position, it's weird and I don't understand why it doesn't work for now.

About using ng-html-bind, I don't really like it because it requires an extra dependency on ng-sanitize... Like discuss in #277

About the position, it's weird and I don't understand why it doesn't work for now.

It was because the changes on scope variable doesn't immediately reflect on DOM but after the $digest loop. $watching the text length and recalculating the dimension fixed the problem. There might be a more efficient solution, but so far this is working fine without noticable performance load. Here's updated fiddle.

About using ng-html-bind, I don't really like it

Here's the alternative, added inject-label class to the elements wanting the contents to be replaced.

If it's looking good, I'll update README and send a pull request.

About the watching, it looks heavy in my opinion. Maybe adding a $timeout call before computing the dimension/position can do the job.

However, my main concern is not to slow down the current version of this library so I want to be sure that we get the same performance as before.

About the inject-label class, I don't really understand how it solves the issue.

Anyway, could you still submit the PR so I can checkout the code on my computer and really understand what are the consequences of such a change?

Maybe adding a $timeout call before computing the dimension/position can do the job.

I actually tied this first, but it broke the labels as I drag handle. Could you see if it works?

About the inject-label class, I don't really understand how it solves the issue.

By this change, now we don't have ng-sanitize dependency, while user can

• put html tag in translate's return value
• use custom template and do things like in fiddle

I got the idea behind inject-label, I think it's a viable solution. However, I prefer to reason in the opposite way: by default, we don't bind the scope, and if there is a special class (like no-auto-label), then we don't call the html() method.

I'll try to have a look to find a way to replace the $watch logic later today ;)

Hello there,

I have a custom directive that modifies my labels for each pointer using xeditable, and it seems that this is attempting to put different labels. I would LOVE for a solution to be posted so that we can target specific labels. Alternately, would you be able to modify the rz-bubble spans above the pointers so that the left and right spans can be targeted more closely?

Thanks!

When you say, targeted for the bubbles, do you mean by CSS ?

I would like to replace the value in the slider with another directive, in this case x-editable, which can manually overwrite the value. Is that possible?

OK So I think that the #358 pull request corresponds to what you need.

So I need to insert my directive directly into the template in order to call it?

Yes but first you need the PR to be merged on master and released.

@Liooo Do you think you can finish it soon?

@ValentinH
Yes boss!

I'm not your boss! :) Just wanted to check if we can expect it soon so that @mm-wang can use it. Do it when you want/can ;)

Just kidding bro.lol yea it's been in my head, guess this is a good timing, will finish it today.

😂

PR has been merged. I'm away from computer this weekend so I'll bump a new version on Monday. ;)

@ValentinH ok thanks!

Hey @ValentinH, is the version up yet? Just curious so that I can start implementing. Thank you!

Released under 5.3.0 ;)

Are the values or the other options of the slider available under the template? I'm looking to create a directive that checks for the value under the label against the floor and ceiling of the slider

No they are not, they are internal to the directive. I dont understand what you are trying to do actually.

Let me try to explain...

I am trying to use another directive called angular-xeditable in order to allow a user to click on a label and adjust the value of the slider.

See below:

I have an editable text field for both the minimum and maximum values of the slider. What you are seeing is the number 100 clicked, with a new user input value of 120. If that person clicks on the check, then the value is updated. When a user clicks on either the minimum or maximum text number, they can then edit it. I am trying to put this field in place of the actual label.

In order to do this, I am checking the value of the input against the maximum and minimum values of the slider, and currently manually changing the value of the slider. Since the label for the slider is now accessible, I can place my directive there, but I'm not sure how to get access to the actual value in order to check it.

Make sense?

OK Now I understand what you want to do, but I don't know how I would do that. It's quite complicated...

I'm wondering if there is a way to modify this in the translate function?

I think what I'm hoping for is a level of two way binding in the template between the values and options in the slider to the nested directive. When the template URL is taken into the directive, can it have a two way binding so that the elements in the slider can be accessible from there?

I think that you use case is really specific and should be handled by a modified version of the slider directive. Indeed, you will get better performance and will be able to do all the tweaks you want to the default behavior.

Yes, you're probably right. Trying to get a bit too deep in here now. Thanks for all the help though!