Positive/negative colored slider

[willemx]

I would like to make a slider that can deliver positive and negative values and I would like the slider color to change accordingly, like this:

can this be done with the current version of noUiSlider?

[washamdev]

Yes, it can. Using the slide event, you can check the current slider value to see if it's negative or not and change the background color of the slider accordingly.

http://jsfiddle.net/johndubya/k48qs5xn/2/

[willemx]

Thanks for looking into this!
Although your fiddle does not do what I proposed, it might be a good starting point for the real thing.
I would like the color to be proportional to the slider value, that is show only from the zero point up to the selected value (like in my example drawing).
The fiddle now changes the entire slider...

[washamdev]

It appears the current markup of the slider does not allow for coloring an exact portion of the slider (i.e. starting in the middle and going all the way right or left). I suppose you could hack the generated HTML of the slider and add a div that starts at 50% and goes left or right, then change the color of that div when the slide event fires.

[iplaksiy]

I'm trying to create the same type of slider and after studying the docs, I still don't understand what you mean by using the connect option to achieve what was asked in the original question. OP was trying to create a slider which starts at 0 and then depending on which direction it moves, the fill follows it either left or right, switching colors based on the direction it is moving as it makes its way towards the edges of the bar.

Connect seems to sort of represent this approach but it adds additional sliders to the bar which are both visible and movable. Furthermore, you would never be able to use the same slider to go in both directions (past the other slider) when using connect. You would have one go one way and one the other.

I know this question is a bit old but could you please elaborate a bit further on how connect aims to resolve what OP was asking about?

[leongersen]

You can pretty much disregard the previous answer, it doesn't apply anymore since the structure of the slider changed a bit to support transforms.

Basically, what I'd do to solve this issue:

• append a new element to the slider (a new connect, if you will)
• Use the positions argument from the slide/update events to set the left/right values for this new element

I'd be happy to help if you set up a basic fiddle.

[iplaksiy]

Yep, that's pretty much what I ended up doing last night:
https://jsfiddle.net/4e87qns6/

Any chance you could add this type of feature in a future release though? Doesn't feel right hacking it up this way, if you know what I mean.

Great library, btw! Thanks so much!

EDIT: To anyone looking at the above fiddle, please don't use that in production code. The code there is for prototypical purposes only. I mean, you can ... but probably shouldn't.

[leongersen]

@iplaksiy What API would you propose?

[iplaksiy]

@leongersen I’m on deadline at the moment, but I should free up in the next couple of days and can take a look then. I have some ideas in my head on how to go about doing it, I’ll just need to flush them out a bit once I get some time.

[leongersen]

I gave it a try too, and I got to a result using only one element and the 'update' event:

https://jsfiddle.net/leongersen/9hyfv0bw/6/

If this fits your requirements, I'll go ahead and add this example to the docs.

[iplaksiy]

Nice! Love the approach! The bg fill while dragging is perfect, however, I just forked your version to see if we could apply the same fluid experience when tapping. In your version, the fill reaches it's destination faster than the handle when tapping.

[leongersen]

You can set transition: width 0.3s to match the handle. You'll have to tweak that a little to match transitions across the 50% boundary, though.

[leongersen]

I'll complete the example and add it to the documentation.

[lloydaarn]

Hi @leongersen, may I ask if it's already implemented in the current version?
the documentation only provides the connect option with only 2 values.
I couldn't find the option for the behavior like you did in this fiddle. https://jsfiddle.net/leongersen/9hyfv0bw/6/

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.