Customize slider handler

[ArnaudValensi]

Hi, It would be useful to be able to customize the slider handle like that:

Can you give me a clue about how to implement it in the plugin ?

Thank you !

[jernejc]

+1 this would be useful

[rafaelbaylon]

I think you need to use the draw hook. please try this:

$("#selector").knob({ "bgColor" : "transparent", // hide default arc "fgColor" : "transparent", draw: function(e) { var c = this.g, // context a = this.arc(this.cv); // Arc

        c.beginPath();          
        c.arc(this.xy, this.xy, this.radius, a.s, a.e, a.d);
        c.strokeStyle="#87ceeb";
        c.lineWidth = 25;
        c.stroke();

        /** get the end angle coordinates . I'm not that good in math but thanks to internet, 
            found it here: http://stackoverflow.com/questions/18342216/how-to-get-an-array-of-coordinates-that-make-up-a-circle-in-canvas **/

        var radians = a.e - Math.PI/180;
        var x = this.xy + this.radius * Math.cos(radians);
        var y = this.xy + this.radius * Math.sin(radians);

        // your custom dot
        c.beginPath();
        c.arc(x , y, 15, 0, 2 * Math.PI, false);         
        c.fillStyle="#ed1c24";
        c.fill();
        c.strokeStyle = "#f68d91" 
        c.lineWidth = 4;
        c.stroke();
}

});

[ArnaudValensi]

@jerrytan86 Thank you!