[Feature] Add Labels around the circle

[BennyAlex]

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.

[soundar24]

@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]

@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]

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

@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]

@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