Search code examples
jqueryhtmljquery-knobround-slider

How to use jqueryKnob's tron skin?


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">

Solution

  • 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