kramer99/vue-knob-control

A rotary knob control for Vue.js

vue-knob-control's Issues

Usage Error

In the Usage section, change VueKnobControl to KnobControl.

import Vue from 'vue'
import VueKnobControl from 'vue-knob-control'

Vue.use(VueKnobControl)

:min and :max cause primary color offset during initial render

When using :min and :max, when the page first loads up, the curving band of primary color appear displaced from the main color wheel. When the wheel is clicked to choose a value, it resets and everything appears to work normally.

Great plugin, this is needed! Thanks!

How to use knob in Vue3?

I am a newer, have not find the way to use it in Vue3.

I import it as a component, and get a error " Cannot read properties of undefined (reading 'getTotalLength')".

How to fix it, thank you!

No Mobile Support

It looks like only mouse events are being listened to, would you have any recommendations on how I may be able to listen for touch events in order to support mobile?

I tried changing the @click, @mousedown, @mouseup events to the touch event equivalents, but the "offsetX" and "offsetY" properties aren't available on TouchEvents so the updatePosition calculation breaks.

this.valueDisplayFunction is not a function

In your computed where you set the textValue you call a method that doesn't exist

Not responsive

This component is not responsive. Its size is forced in px and size is expected as Number.

Any option for that in progress ?

Positionning is taken from target event element.

Hey guys, I think I understand one of the reason why the numbers were sometimes behaving a little chaotic.

When your mouse is moving outside the element of concern it was using the offset position within this dom element.

I am using the mouse position from the client position now so the target won't matter and using the getBoundClientRect to get the center of the knob.

It works pretty well on my fork.

Do you want me to issue PR?

mousedown event not working

Hi,
Is it possible to get status if the slider is being moved. When I use @click.native="mousedown" in parameters, I get the following error:

"Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted."

Or, isn't there any onChange event?

I'm trying to interlink 4 knobs, and so, if one knob is slided, I needed to set an active flag to it and remove active flags on all other knobs.

Adding symbols to the shown value

It would be nice, to have the option adding a symbol after the shown value (like °C / % and so on)

screenshots