Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Positive/negative colored slider #371

Closed
willemx opened this issue Nov 15, 2014 · 12 comments
Closed

Positive/negative colored slider #371

willemx opened this issue Nov 15, 2014 · 12 comments
Assignees
Labels
Milestone

Comments

@willemx
Copy link

@willemx willemx commented Nov 15, 2014

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:

image

can this be done with the current version of noUiSlider?

@washamdev
Copy link
Contributor

@washamdev washamdev commented Nov 20, 2014

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
Copy link
Author

@willemx willemx commented Nov 20, 2014

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
Copy link
Contributor

@washamdev washamdev commented Nov 20, 2014

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.

@leongersen leongersen added this to the 8.0.0 milestone Jun 20, 2015
@leongersen leongersen closed this Jun 29, 2015
@iplaksiy
Copy link

@iplaksiy iplaksiy commented Mar 22, 2018

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
Copy link
Owner

@leongersen leongersen commented Mar 22, 2018

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
Copy link

@iplaksiy iplaksiy commented Mar 22, 2018

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
Copy link
Owner

@leongersen leongersen commented Mar 22, 2018

@iplaksiy What API would you propose?

@leongersen leongersen changed the title Positive/negative colored slider; can this be done? Positive/negative colored slider Mar 22, 2018
@leongersen leongersen added the Feature label Mar 22, 2018
@leongersen leongersen removed this from the 8.0.0 milestone Mar 22, 2018
@leongersen leongersen reopened this Mar 22, 2018
@iplaksiy
Copy link

@iplaksiy iplaksiy commented Mar 24, 2018

@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
Copy link
Owner

@leongersen leongersen commented Apr 2, 2018

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
Copy link

@iplaksiy iplaksiy commented Apr 2, 2018

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
Copy link
Owner

@leongersen leongersen commented Apr 9, 2018

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 leongersen added this to the noUiSlider 12 milestone Sep 12, 2018
@leongersen
Copy link
Owner

@leongersen leongersen commented Sep 12, 2018

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

@leongersen leongersen self-assigned this Sep 13, 2018
@leongersen leongersen closed this Sep 14, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.