How to use jqueryKnob's tron skin?

Question

Well this is my first use of the jqueryKnob plugin. I am trying to use the format option and the skin option in this plugin but it doesnt seem to work. For the skin issue I tried jQuery knob tron skin issue but was of no help. Where am I possibly going wrong?

<script>
    $(function() {
        $('.dial').knob({
            readOnly:true,
            fgColor:"#D07321",
            inputColor:"#3e4040",
            thickness: 0.1,
            skin:"tron",

            draw : function () {

                // "tron" case
                if(this.$.data('skin') == 'tron') {

                    this.cursorExt = 0.3;

                    var a = this.arc(this.cv)  // Arc
                        , pa                   // Previous arc
                        , r = 1;

                    this.g.lineWidth = this.lineWidth;

                    if (this.o.displayPrevious) {
                        pa = this.arc(this.v);
                        this.g.beginPath();
                        this.g.strokeStyle = this.pColor;
                        this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
                        this.g.stroke();
                    }

                    this.g.beginPath();
                    this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
                    this.g.stroke();

                    this.g.lineWidth = 2;
                    this.g.beginPath();
                    this.g.strokeStyle = this.o.fgColor;
                    this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                    this.g.stroke();

                    return false;
                }
            }
        })
    });
</script>

HTML

<input title="" type="text" value="75" class="dial">

Actually what is your problem here ? what doesn't work ? Can you explain about your requirement and the issue you are facing... — Soundar, Sep 04 '16 at 17:58
Actually I am not being able to use the tron skin but can't use it like the way given in the link above. — Ayan, Sep 04 '16 at 18:00
still it makes confusion.. in which way you can't use ? just explain your need and issue, also update any screenshot or fiddle for better understanding.. — Soundar, Sep 04 '16 at 19:21
@Soundar R, well are you aware of the "Tron" skin available in the plugin? That is what I want to use but how? Because according to the docs I have tried but failed. Check this page for the tron skin http://anthonyterrien.com/demo/knob/. — Ayan, Sep 04 '16 at 20:11
Yes now i got this.. Are you want to achieve this with jquery knob or any alternate plugin can do ? — Soundar, Sep 04 '16 at 20:55
have you seen my below answer.. is this suitable for your requirement / is this solves your problem ? — Soundar, Sep 05 '16 at 04:30
Well, I haven't tried it out yet but from seeing it, YES, it is what I am after. Using roundSlider dynamic value update will be easy, right? Once I try your code I will check it green. — Ayan, Sep 05 '16 at 05:39
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/122641/discussion-between-soundar-r-and-ayan). — Soundar, Sep 05 '16 at 08:23
had you seen the final demo for the smooth color change ? http://jsfiddle.net/soundar24/LpuLe9tr/635/ — Soundar, Sep 07 '16 at 18:24

score 0 · Accepted Answer · answered Sep 04 '16 at 21:58

Here the problem is you missed the data-skin="tron" attribute in the element.

Check the updated demo: Demo with knob

Alternatively I suggest you to use the jQuery roundSlider plugin which is made up of basic DOM elements. So you can customize the overall control appearance through the CSS itself, and no need of much more scripts.

Here i make the same demo with roundSlider, check the demo: Demo with roundSlider

Also you can easily customize by yourself: Additional DEMO

You can check more appearance of roundSlider from here:

http://roundsliderui.com/demos.html#different-theming-and-appearances

How to use jqueryKnob's tron skin?

1 Answers1