search

soundar24 / vue-round-slider

A round slider component for Vue JS, with range slider support. Also it can be any kind of arc slider such as pie shape, half / semi-circle, quarter circle shape sliders.
https://vue.roundsliderui.com/
MIT License
69 stars 14 forks source link

Can the whole range be dragged? #13

Closed blueciii closed 2 years ago

blueciii commented 2 years ago

It would great if it is possible to drag the whole range in both directions to be able to change the min and max values without changing the "distance" between them.

soundar24 commented 2 years ago

@blueciii I have added a custom file to make this behaviour, as of now it was not added in the source. So you can use this behaviour in the application level. Check the below demo:

https://codesandbox.io/s/vue-round-slider-range-drag-67oofs?file=/src/components/SliderDemo.vue

Please let me know whether this is your expected behaviour or not, and update me your comments. Thanks.

blueciii commented 2 years ago

Thank you very much, this is awesome! By the way, is there a way to make it so that when dragging the range, it doesn't stop at the starting point? For example (out of 100) if I want to cover [20 - 80] (20...10...0...90...80)

soundar24 commented 2 years ago

@blueciii I can't get your requirement.

Consider your current value is [20 - 80], and you are dragging the range towards min value. So it becomes [10 - 70] and [0 - 60]. After that it can't go beyond the min value. If still you want to allow that then it becomes [90 - 50] which is an invert range. Is this what you require?

Can you please describe it more briefly. Due you have any use case where the functionality is needed?

blueciii commented 2 years ago

Sorry if I wasn't clear. Based on the sample you gave in your previous comment, for example I set the slider to have 8 steps north, north-east, east, south-east, south, south-west, west and north-west. I would like to be able to drag the slider to "cover", north-west, west & south-west.

Basically getting it to go beyond the min value like what you said. Is this possible with this component?

soundar24 commented 2 years ago

any kind of customization you can do with round slider, so I understood you correctly I hope the below demo might what you want: https://codesandbox.io/s/vue-round-slider-range-drag-without-minmax-limit-i8i9qn?file=/src/components/SliderDemo.vue

Check this and let me know your comments.

blueciii commented 2 years ago

You are the best. Love the work and support!