change the target (bar) background color depending the pips value

[kikitsa]

Is there any way to change the background color of target (bar) depending the value of pips?

For example, if I have a range: {min: 0, max: 100} then I want my target to be red between 0-50 and blue between 51-100. Note that I am not refer to the connect color between handles but the the permanent color in target.

[pietrov8]

Is there any way to change the background color of target (bar) depending the value of pips?

For example, if I have a range: {min: 0, max: 100} then I want my target to be red between 0-50 and blue between 51-100. Note that I am not refer to the connect color between handles but the the permanent color in target.

Did you find a solution?

[kikitsa]

Yeap! :)

Actually I have two solutions.

1) I managed to use different colours between pips, by overriding the relative css class of no-ui-slider and using linear-gradient. For example, background: linear-gradient(to bottom, #333, #333 50%, #eee 75%, #333 75%);

2) With the first solution I had the result that I wanted, but it was static and I wanted to change the colour dynamically. That means, that I wanted something like background: linear-gradient(to bottom, #333, #333 x1, #eee x2, #333 x2);

Therefore, I implemented a helper in javascript which is able to find the x1, x2 etc (which are the colours stops). According to the output I was able to create a style and using the ng-style (Angular's directive) I was able to apply the new background in the target (bar).

[Yankovsky]

@kikitsa You can add it as example to this repo, would be nice :)

@kikitsa @pietrov8 do you need any help with that issue?

[kikitsa]

@Yankovsky I don't need any help. I fixed my problem with the above solution :) Thanks!