jquery knob 旋钮的简单使用

@{
    ViewData["Title"] = "Test";
    Layout = null;
    // Layout = "~/Views/Shared/_Layout.cshtml";
} 

<script src="~/plugins/vue/vue.js"></script>
<h1 class="text-white">Test</h1>

 
<div class="row">
    <div class="col-6 text-center">
        <input type="text" class="knob" value="90" data-width="90" data-height="90" data-fgColor="red"> 

        @*<div class="knob-label">Bandwidth</div>*@
    </div>
</div>
 

<script type="text/javascript"> 
 
    $(function () {
        $(".knob").knob({
            max: 100,
            min: 100,
            readOnly:true,
            thickness: .2,
            fgColor:'red',// '#2B99E6',
            bgColor: 'red',
            'release': function (e) {
                $('#img').animate({ width: e });
            },
            'draw': function () {
                $(this.i).val('日月年')
            }
        });

        //$(".knob2").knob({
        //    'release': function (e) {
        //        $('#img').animate({ width: e });
        //    }
        //});
    });
 
</script>

效果如下图所示