[bsrow tag=”div” css_animation=”appear” css=”.vc_custom_1402893615167{padding-top: 90px !important;padding-bottom: 90px !important;}”][bscolumn tag=”div” columns_mobile=”12″ columns_tablet=”3″ columns_small=”3″ columns_large=”3″ offset_mobile=”0″ offset_tablet=”1″ offset_small=”1″ offset_large=”1″ push_mobile=”0″ push_tablet=”0″ push_small=”0″ push_large=”0″ pull_mobile=”0″ pull_tablet=”0″ pull_small=”0″ pull_large=”0″ hidden_mobile=”0″ hidden_tablet=”0″ hidden_small=”0″ hidden_large=”0″ visible_mobile=”0″ visible_tablet=”0″ visible_small=”0″ visible_large=”0″ textalign=”center”][jqknob min=”0″ max=”100″ value=”60″ step=”10″ width=”300″ height=”300″ angleoffset=”0″ anglearc=”360″ thickness=”0.5″ linecap=”round” rotation=”default” displayinput=”true” fontweight=”normal” fontsize=”1″ inputcolor=”#ffffff” fgcolor=”#176b9b” bgcolor=”#eaeaea”][/bscolumn][bscolumn tag=”div” textalign=”center” columns_mobile=”12″ columns_tablet=”8″ columns_small=”8″ columns_large=”8″ offset_mobile=”0″ offset_tablet=”0″ offset_small=”0″ offset_large=”0″ push_mobile=”0″ push_tablet=”0″ push_small=”0″ push_large=”0″ pull_mobile=”0″ pull_tablet=”0″ pull_small=”0″ pull_large=”0″ hidden_mobile=”0″ hidden_tablet=”0″ hidden_small=”0″ hidden_large=”0″ visible_mobile=”0″ visible_tablet=”0″ visible_small=”0″ visible_large=”0″ fontcolor=”#ffffff”]
[/bscolumn][/bsrow]
Dial Knob
jQuery Dial Knob Element integrated as a shortcode
[bsrow tag=”div” css_animation=”appear” css=”.vc_custom_1402896649228{padding-top: 60px !important;padding-bottom: 60px !important;}” class=”vertical-center”][bscolumn tag=”div” columns_mobile=”12″ columns_tablet=”4″ columns_small=”4″ columns_large=”4″ offset_mobile=”0″ offset_tablet=”0″ offset_small=”0″ offset_large=”0″ push_mobile=”0″ push_tablet=”0″ push_small=”0″ push_large=”0″ pull_mobile=”0″ pull_tablet=”0″ pull_small=”0″ pull_large=”0″ hidden_mobile=”0″ hidden_tablet=”0″ hidden_small=”0″ hidden_large=”0″ visible_mobile=”0″ visible_tablet=”0″ visible_small=”0″ visible_large=”0″ css=”.vc_custom_1402897744248{margin-bottom: 30px !important;}” class=”vertical-target”]
[/bscolumn][bscolumn tag=”div” columns_mobile=”0″ columns_tablet=”6″ columns_small=”6″ columns_large=”6″ offset_mobile=”0″ offset_tablet=”1″ offset_small=”1″ offset_large=”1″ push_mobile=”0″ push_tablet=”0″ push_small=”0″ push_large=”0″ pull_mobile=”0″ pull_tablet=”0″ pull_small=”0″ pull_large=”0″ hidden_mobile=”0″ hidden_tablet=”0″ hidden_small=”0″ hidden_large=”0″ visible_mobile=”0″ visible_tablet=”0″ visible_small=”0″ visible_large=”0″]
[/bscolumn][/bsrow]
Available as shortcode
You can use shortcode to easily build the dial knob element in WordPress widget or post content.
[bsrow tag=”div” css_animation=”appear” css=”.vc_custom_1402896649228{padding-top: 60px !important;padding-bottom: 60px !important;}” class=”vertical-center”][bscolumn tag=”div” columns_mobile=”0″ columns_tablet=”6″ columns_small=”6″ columns_large=”6″ offset_mobile=”0″ offset_tablet=”0″ offset_small=”0″ offset_large=”0″ push_mobile=”0″ push_tablet=”0″ push_small=”0″ push_large=”0″ pull_mobile=”0″ pull_tablet=”0″ pull_small=”0″ pull_large=”0″ hidden_mobile=”0″ hidden_tablet=”0″ hidden_small=”0″ hidden_large=”0″ visible_mobile=”0″ visible_tablet=”0″ visible_small=”0″ visible_large=”0″]
[/bscolumn][bscolumn tag=”div” columns_mobile=”12″ columns_tablet=”4″ columns_small=”4″ columns_large=”4″ offset_mobile=”0″ offset_tablet=”1″ offset_small=”1″ offset_large=”1″ push_mobile=”0″ push_tablet=”0″ push_small=”0″ push_large=”0″ pull_mobile=”0″ pull_tablet=”0″ pull_small=”0″ pull_large=”0″ hidden_mobile=”0″ hidden_tablet=”0″ hidden_small=”0″ hidden_large=”0″ visible_mobile=”0″ visible_tablet=”0″ visible_small=”0″ visible_large=”0″ css=”.vc_custom_1402901591891{margin-bottom: 30px !important;}” class=”vertical-target”]
[/bscolumn][/bsrow]
Integrated with Visual Composer
You can use the dial knob shortcode in nice Graphical User Interface with Visual Composer Plugin
[bsrow tag=”div” css_animation=”appear” css=”.vc_custom_1402896649228{padding-top: 60px !important;padding-bottom: 60px !important;}” class=”vertical-center”][bscolumn tag=”div” columns_mobile=”12″ columns_tablet=”4″ columns_small=”4″ columns_large=”4″ offset_mobile=”0″ offset_tablet=”0″ offset_small=”0″ offset_large=”0″ push_mobile=”0″ push_tablet=”0″ push_small=”0″ push_large=”0″ pull_mobile=”0″ pull_tablet=”0″ pull_small=”0″ pull_large=”0″ hidden_mobile=”0″ hidden_tablet=”0″ hidden_small=”0″ hidden_large=”0″ visible_mobile=”0″ visible_tablet=”0″ visible_small=”0″ visible_large=”0″ css=”.vc_custom_1402897744248{margin-bottom: 30px !important;}” class=”vertical-target”]
[/bscolumn][bscolumn tag=”div” columns_mobile=”0″ columns_tablet=”6″ columns_small=”6″ columns_large=”6″ offset_mobile=”0″ offset_tablet=”1″ offset_small=”1″ offset_large=”1″ push_mobile=”0″ push_tablet=”0″ push_small=”0″ push_large=”0″ pull_mobile=”0″ pull_tablet=”0″ pull_small=”0″ pull_large=”0″ hidden_mobile=”0″ hidden_tablet=”0″ hidden_small=”0″ hidden_large=”0″ visible_mobile=”0″ visible_tablet=”0″ visible_small=”0″ visible_large=”0″ textalign=”center”]
[/bscolumn][/bsrow]
Customization
Create different kind of dial knob element with ease
[jqknob min=”0″ max=”100″ value=”50″ step=”10″ width=”200″ height=”200″ angleoffset=”90″ anglearc=”180″ thickness=”0.5″ linecap=”round” rotation=”default” displayinput=”true” fontweight=”normal” fontsize=”1″ fgcolor=”#3fccb4″ bgcolor=”#f2f2f2″ css=”.vc_custom_1402966142612{margin-bottom: 30px !important;}”]
[jqknob min=”0″ max=”100″ value=”30″ step=”10″ width=”200″ height=”200″ angleoffset=”270″ anglearc=”270″ thickness=”0.2″ linecap=”default” rotation=”default” displayinput=”true” fontweight=”normal” fontsize=”1″ fgcolor=”#fc9985″ bgcolor=”#d1d1d1″ inputcolor=”#050202″ css=”.vc_custom_1402966317829{margin-bottom: 30px !important;padding-bottom: 30px !important;}”]
[jqknob min=”0″ max=”100″ value=”100″ step=”10″ width=”200″ height=”200″ angleoffset=”-90″ anglearc=”180″ thickness=”0.3″ linecap=”round” rotation=”default” displayinput=”true” fontweight=”normal” fontsize=”1″ fgcolor=”#f4d538″ bgcolor=”#f2f2f2″]
[jqknob min=”0″ max=”100″ value=”30″ step=”10″ width=”200″ height=”200″ angleoffset=”225″ anglearc=”270″ thickness=”0.2″ linecap=”default” rotation=”default” displayinput=”true” fontweight=”normal” fontsize=”2″ fgcolor=”#81d742″ bgcolor=”#dddddd” inputcolor=”#050202″]
[jqknob min=”0″ max=”100″ value=”60″ step=”10″ width=”200″ height=”200″ angleoffset=”-90″ anglearc=”270″ thickness=”0.2″ linecap=”round” rotation=”anticlockwise” displayinput=”true” fontweight=”normal” fontsize=”2″ fgcolor=”#4f86ff” bgcolor=”#f2f2f2″ css=”.vc_custom_1402966093301{margin-bottom: 30px !important;}”]
[jqknob min=”0″ max=”100″ value=”60″ step=”10″ width=”200″ height=”200″ angleoffset=”90″ anglearc=”270″ thickness=”0.1″ linecap=”default” rotation=”default” displayinput=”true” fontweight=”normal” fontsize=”1″ fgcolor=”#671aaf” bgcolor=”#e8e8e8″ inputcolor=”#050202″]
[bsrow tag=”div” css_animation=”appear” css=”.vc_custom_1402901869863{padding-top: 60px !important;padding-bottom: 60px !important;}”][bscolumn tag=”div” columns_mobile=”0″ columns_tablet=”6″ columns_small=”6″ columns_large=”6″ offset_mobile=”0″ offset_tablet=”0″ offset_small=”0″ offset_large=”0″ push_mobile=”0″ push_tablet=”0″ push_small=”0″ push_large=”0″ pull_mobile=”0″ pull_tablet=”0″ pull_small=”0″ pull_large=”0″ hidden_mobile=”0″ hidden_tablet=”0″ hidden_small=”0″ hidden_large=”0″ visible_mobile=”0″ visible_tablet=”0″ visible_small=”0″ visible_large=”0″ textalign=”center”][jqknob min=”0″ max=”100″ value=”70″ step=”10″ width=”50″ height=”50″ angleoffset=”0″ anglearc=”360″ thickness=”0.3″ linecap=”default” rotation=”default” displayinput=”true” fontweight=”normal” fontsize=”1″ fgcolor=”#ff5678″ bgcolor=”#bfbfbf” inputcolor=”#727272″][jqknob min=”0″ max=”100″ value=”70″ step=”10″ width=”80″ height=”80″ angleoffset=”0″ anglearc=”360″ thickness=”.4″ linecap=”default” rotation=”default” displayinput=”true” fontweight=”normal” fontsize=”1″ fgcolor=”#ff5678″ bgcolor=”#bfbfbf” inputcolor=”#727272″][jqknob min=”0″ max=”100″ value=”70″ step=”10″ width=”120″ height=”120″ angleoffset=”0″ anglearc=”360″ thickness=”0.5″ linecap=”default” rotation=”default” displayinput=”true” fontweight=”normal” fontsize=”1″ fgcolor=”#ff5678″ bgcolor=”#bfbfbf” inputcolor=”#727272″][/bscolumn][bscolumn tag=”div” columns_mobile=”12″ columns_tablet=”4″ columns_small=”4″ columns_large=”4″ offset_mobile=”0″ offset_tablet=”1″ offset_small=”1″ offset_large=”1″ push_mobile=”0″ push_tablet=”0″ push_small=”0″ push_large=”0″ pull_mobile=”0″ pull_tablet=”0″ pull_small=”0″ pull_large=”0″ hidden_mobile=”0″ hidden_tablet=”0″ hidden_small=”0″ hidden_large=”0″ visible_mobile=”0″ visible_tablet=”0″ visible_small=”0″ visible_large=”0″ css=”.vc_custom_1402901701852{margin-bottom: 30px !important;}” class=”vertical-target”]
[/bscolumn][/bsrow]
Resizeable
Easily resize the dial knob element
[bsrow tag=”div” css_animation=”appear” css=”.vc_custom_1402901850358{padding-top: 60px !important;padding-bottom: 60px !important;}”][bscolumn tag=”div” columns_mobile=”12″ columns_tablet=”4″ columns_small=”4″ columns_large=”4″ offset_mobile=”0″ offset_tablet=”0″ offset_small=”0″ offset_large=”0″ push_mobile=”0″ push_tablet=”0″ push_small=”0″ push_large=”0″ pull_mobile=”0″ pull_tablet=”0″ pull_small=”0″ pull_large=”0″ hidden_mobile=”0″ hidden_tablet=”0″ hidden_small=”0″ hidden_large=”0″ visible_mobile=”0″ visible_tablet=”0″ visible_small=”0″ visible_large=”0″ css=”.vc_custom_1402897744248{margin-bottom: 30px !important;}” class=”vertical-target”]
[/bscolumn][bscolumn tag=”div” columns_mobile=”12″ columns_tablet=”6″ columns_small=”6″ columns_large=”6″ offset_mobile=”0″ offset_tablet=”1″ offset_small=”1″ offset_large=”1″ push_mobile=”0″ push_tablet=”0″ push_small=”0″ push_large=”0″ pull_mobile=”0″ pull_tablet=”0″ pull_small=”0″ pull_large=”0″ hidden_mobile=”0″ hidden_tablet=”0″ hidden_small=”0″ hidden_large=”0″ visible_mobile=”0″ visible_tablet=”0″ visible_small=”0″ visible_large=”0″ textalign=”center”][jqknob min=”0″ max=”100″ value=”20″ step=”10″ width=”50″ height=”50″ angleoffset=”0″ anglearc=”360″ thickness=”0.3″ linecap=”default” rotation=”default” displayinput=”true” fontweight=”normal” fontsize=”1″ fgcolor=”#eded93″ bgcolor=”#d26ddb” inputcolor=”#494949″][jqknob min=”0″ max=”100″ value=”80″ step=”10″ width=”80″ height=”80″ angleoffset=”0″ anglearc=”360″ thickness=”0.4″ linecap=”default” rotation=”default” displayinput=”true” fontweight=”normal” fontsize=”1″ fgcolor=”#25d186″ bgcolor=”#c4ac9d” inputcolor=”#5e5e5e”][jqknob min=”0″ max=”100″ value=”60″ step=”10″ width=”100″ height=”100″ angleoffset=”0″ anglearc=”360″ thickness=”0.5″ linecap=”default” rotation=”default” displayinput=”true” fontweight=”normal” fontsize=”1″ fgcolor=”#36cadb” bgcolor=”#e5e5e5″ inputcolor=”#7c7c7c”][/bscolumn][/bsrow]
Recolorable
Totally recolorable, no limit on what color you can use for it!