Add a button to jQuery-Knob slider

Question

I need your help. I'm working on the project where necessary to implement a circular slider with draggable button-control by it. I decided to use this jQuery-Knob slider. it's great but I need to add button that could be possible to set styles and be dragged

I made a decision to add div element through javascript and then tie native Jquery Knob params of dragging to it.

Here what I have done

And here is my code

function addBtnControl(self) {
              // cache variables
              var button = document.getElementById('knob-ctrl'),
                  cx = 22*self.scale,
                  cy = 20*self.scale,
                  a = self.arc(self.cv),
                  start = xyOnArc(self.xy-cx, self.xy-cy, self.radius/self.scale, a.s);

              // check if pointer-events are supported
              // if not than use fallback btn ctrl for IE
              App.config.Modernizr.addTest('csspointerevents',function(){
                return 'pointerEvents' in document.documentElement.style;
              });
              if (App.config.Modernizr.csspointerevents) {
                self.cursorExt = 0;

                button.style.left = start.x + "px";
                button.style.top = start.y + "px";
              }

              function xyOnArc(cx, cy, radius, radianAngleX) {
                var x = cx + radius * Math.cos(radianAngleX);
                var y = cy + radius * Math.sin(radianAngleX);
                return ({
                    x: x,
                    y: y
                });
              }
            }

            // init Button Ctrl

            addBtnControl(this); 

I dynamically added a button and borrowed params that must be enough to make a well-suited draggable control but I've been doing something wrong because if I scale a browser or just open on another screen size it looks like this

So something wrong with the functions and params that passed to it.

Answer 1

Actually jQuery knob was using Canvas, so adding external layers with it makes more complex.

Alternatively i suggest to use the jQuery roundSlider plugin which is similar to knob, but it constructs based on the div elements only. So you can make any custom appearances as per your wish.

For more details check the demos and documentation page.

Check this demo from jsFiddle which is similar to your requirement.

Screenshot of the Output: