Add segment attribute to q-knob and q-circular-progress

[raesche]

Idea

Both the q-knob and q-circular-progress components only provide the full 360° range of a circle. It would be very nice if the range could be reduced to a user defined value so only a segment of a circle can be created. A circle segment is easier to read and modify, because it's very clear where the segment starts and ends. With a full 360° circle, it is also very hard to set the min and max values because the value jumps to the other end when moving just a little bit to far.

Please have a look at this example component to see what I mean:
https://github.com/kramer99/vue-knob-control

Suggestion:

Use the existing angle attribute to define the start angle of the segment
Add a segment attribute to define the size of the segment in degrees.

Examples:

Create a knob similar to the example in the link:

angle = -135
segment = 270

Create a knob similar to the example before, but this time "upside down":

angle = -45
segment = -270

[hawkeye64]

Use v-model and angle: https://quasar.dev/vue-components/knob#offset-angle

[raesche]

Hi
Thanks, but that's not a real solution to my suggestion or at least I didn't get your point. With the angle attribut you can only change the angle at where the knob starts, but the knob always makes a full 360° turn. I prefere the way it is implemented in the picture below where the knob has a "gap" for two reasons:

1. It's easier to read the value of the knob, there's no ambiguity
2. It's easy to select the min and max value without accidentally jumping from one end to the other

The solution with the angle attribute has the following problems:

1. It's not so clear if it the knob below displays a value of 25% or 75%
2. When clicking near the 0% position and moving the mouse slightly to the right, the knob may jump to 100%. It's quiet tricky and annoying to set it to exactly 0% or 100%

Best regards
Rashid