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

Comments

Projects
None yet
4 participants
@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?

@johndubya

This comment has been minimized.

Show comment
Hide comment
@johndubya

johndubya Nov 20, 2014

Contributor

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/

Contributor

johndubya 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

This comment has been minimized.

Show comment
Hide comment
@willemx

willemx 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...

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...

@johndubya

This comment has been minimized.

Show comment
Hide comment
@johndubya

johndubya Nov 20, 2014

Contributor

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.

Contributor

johndubya 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

This comment has been minimized.

Show comment
Hide comment
@iplaksiy

iplaksiy 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?

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

This comment has been minimized.

Show comment
Hide comment
@leongersen

leongersen Mar 22, 2018

Owner

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.

Owner

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

This comment has been minimized.

Show comment
Hide comment
@iplaksiy

iplaksiy 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.

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

This comment has been minimized.

Show comment
Hide comment
@leongersen

leongersen Mar 22, 2018

Owner

@iplaksiy What API would you propose?

Owner

leongersen commented Mar 22, 2018

@iplaksiy What API would you propose?

@leongersen leongersen changed the title from Positive/negative colored slider; can this be done? to 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

This comment has been minimized.

Show comment
Hide comment
@iplaksiy

iplaksiy 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.

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

This comment has been minimized.

Show comment
Hide comment
@leongersen

leongersen Apr 2, 2018

Owner

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.

Owner

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

This comment has been minimized.

Show comment
Hide comment
@iplaksiy

iplaksiy 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.

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

This comment has been minimized.

Show comment
Hide comment
@leongersen

leongersen Apr 9, 2018

Owner

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.

Owner

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

This comment has been minimized.

Show comment
Hide comment
@leongersen

leongersen Sep 12, 2018

Owner

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

Owner

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