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

[Feature] Add Labels around the circle #5

Open BennyAlex opened 4 years ago

BennyAlex commented 4 years ago

Hello,

It would be nice to display the labels/values around the cirlce, like in the image below.

Or if you know how I can do it on my page by myself, this would also be cool.

image

soundar24 commented 4 years ago

@BennyAlex Currently this option is not available in source level, so I created a demo to achieve this in sample level. Check the below demo and update me your comments:

https://codesandbox.io/s/label-number-around-circle-91tgg?file=/src/components/SliderDemo.vue

Also here I have updated some more demos of the JavaScript version, you can just refer the logic if needed: https://jsfiddle.net/soundar24/Ln09a2uc/4/ https://jsfiddle.net/soundar24/mej47kc9/ https://jsfiddle.net/soundar24/fdktwsbj/

BennyAlex commented 4 years ago

@soundar24 Hey, thanks for your fast response.

I like the style of the first example, however I need a 'min-range' slider, but using it causes the numbers to disappear. This works, but there is not enough space between the numbers and the slider: https://codesandbox.io/s/label-number-around-circle-forked-l1pj3 Thanks in advance.

Found it now by myself, but the bug below is still present.

BennyAlex commented 4 years ago

And there seems like a bug, when selecting 0 the selected range is still colored, it does only get resetted when selecting 1

image

@soundar24 the problem is that the first and the last value are very close to each other and the label for the last isn't showing for some reason (your for-loop has an error, it should be 'i <= max' instead of 'i < max'.

soundar24 commented 4 years ago

@BennyAlex If you want to increase the space between the number and the slider then you can adjust the "left" value from the .rs-number class.

And regarding the bug you reported, that is the default behaviour of the round slider. Since the circle is a 360 degree, and the start angle (0) and the end angle (360) will be at the same point. Also, originally our slider starts with 0 and ends with 10, to achieve your behaviour I didn't consider the last value. So that the for loop range was like that.

If you want to modify this behaviour then we can control this, check the below demo which is your expected behaviour:

https://codesandbox.io/s/label-number-around-circle-forked-m0de7?file=/src/components/SliderDemo.vue