Vue-slider-component: How can I limit the allowed range of sliders while preserving min / max values?

Created on 10 Apr 2018 · 4Comments · Source: NightCatSama/vue-slider-component

Use case:

I have 3 users and I need to split $100 worth of donations between all 3 of them. When I move first slider to say $50, I want other sliders to only allow me to move up to $50 but I don't really want to change the min max values as that will offset the positions of the sliders each time.

Is there any option I could use for that, e.g. min: 0, max: 100, allowedRange: 0-50?

Source

Rrrafau

Most helpful comment

Sorry, it does not support your needs now, but can be achieved by watch.

I wrote a simple example.

But this is not an elegant method. I will consider adding it in the future, also welcome you to submit pr.

NightCatSama on 10 Apr 2018

👍3

All 4 comments

Sorry, it does not support your needs now, but can be achieved by watch.

I wrote a simple example.

But this is not an elegant method. I will consider adding it in the future, also welcome you to submit pr.

NightCatSama on 10 Apr 2018

👍3

Thanks for the code sample, I ve managed to accomplish similar thing by changing the value back to the initial value set by drag-start event, but using watchers is actually more elegant even if it's not perfect!

Rrrafau on 10 Apr 2018

Would love this functionality also.