JSFiddle - React, Tailwind, and code Playground

by Irvin Dominin

HTML

<script src="http://anthonyterrien.com/js/jquery.knob.js"></script>
<input type="text" class="ksta" value="51" data-width="80" data-thickness="0.2" />

JavaScript

jQuery(document).ready(function ($) {
    $('.ksta').knob({
        'min': 0,
            'max': 100,
            'step': 1,
            'readOnly': false,
            'data-linecap': 'round',
            'draw': function () {
            if ($(this.i).siblings(".kb-suffix").length > 0) return
            var pos1 = parseInt($(this.i).css("marginLeft").replace('px', ''));
            var pos2 = parseInt($(this.i).css("marginTop").replace('px', ''));
            var $elem = $("<span>$</span>").attr("style", $(this.i).attr("style")).addClass("kb-suffix");
            $elem.insertAfter(this.i).css({
                marginLeft: (pos1 + 20) + "px",
                marginTop: (pos2 + 3) + "px",
                zIndex: -10
            });

        }
    });
});