metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Enhance a text input for entering numeric values, with plus/minus buttons and arrow key handling. Excellent to create the element for pin enter. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Spinner - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Spinner</a></li> <li class="toc-entry"><a href="#_input_about">About</a></li> <li class="toc-entry"><a href="#_input_step">Spinner step</a></li> <li class="toc-entry"><a href="#_input_minmax">Min & max</a></li> <li class="toc-entry"><a href="#_input_buttons">Buttons position</a></li> <li class="toc-entry"><a href="#_input_options">Options</a></li> <li class="toc-entry"><a href="#_input_events">Events</a></li> <li class="toc-entry"><a href="#_input_methods">Methods</a></li> <li class="toc-entry"><a href="#_input_customize">Customize</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Spinner</h1> <p class="text-leader"> Enhance a text input for entering numeric values, with plus/minus buttons and up/down arrows key handling. </p>  <h3 id="_input_about">About</h3> <p> To create <code>spinner</code>, add attribute <code>data-role="spinner"</code> to HTML input element. You must assign role <code>input</code> to text input <code>input type="text"</code>. </p> <div class="example"> <input type="text" data-role="spinner"> </div> <pre><code> <input type="text" data-role="spinner"> </code></pre> <h3 id="_input_step">Spinner step</h3> <p> You can set step for change spinner value with attribute <code>data-step</code>. Value can be <code>integer</code> or <code>float</code>. If your step is float, you can set a number of digits after dot with attribute <code>data-fixed</code>. </p> <div class="example"> <p>Step: 10</p> <input type="text" data-role="spinner" data-step="10"> <p>Step: 0.756, fixed: 4</p> <input type="text" data-role="spinner" data-step=".756" data-fixed="4"> </div> <pre><code> <p>Step: 10</p> <input type="text" data-role="spinner" data-step="10"> <p>Step: 0.756, fixed: 4</p> <input type="text" data-role="spinner" data-step=".756" data-fixed="4"> </code></pre> <h3 id="_input_minmax">Min & max values</h3> <p> You can set minimum and maximum values for spinner with attributes <code>data-min-value</code> and <code>data-max-value</code>. </p> <div class="example"> <p>Min: -10, Max: 10</p> <input type="text" data-role="spinner" data-min-value="-10" data-max-value="10"> </div> <pre><code> <p>Min: -10, Max: 10</p> <input type="text" data-role="spinner" data-min-value="-10" data-max-value="10"> </code></pre> <h3 id="_input_buttons">Buttons position</h3> <p> You can set spinner buttons position with attribute <code>data-buttons-position</code>. </p> <div class="example"> <p>Default</p> <input type="text" data-role="spinner" data-buttons-position="default"> <p>Left</p> <input type="text" data-role="spinner" data-buttons-position="left"> <p>Right</p> <input type="text" data-role="spinner" data-buttons-position="right"> </div> <pre><code> <p>Default</p> <input type="text" data-role="spinner" data-buttons-position="default"> <p>Left</p> <input type="text" data-role="spinner" data-buttons-position="left"> <p>Right</p> <input type="text" data-role="spinner" data-buttons-position="right"> </code></pre>  <h3 id="_input_options">Options</h3> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Option</th> <th>Data-*</th> <th>Default</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>step</code></td> <td><code>data-step</code></td> <td>1</td> <td>Step for change spinner value</td> </tr> <tr> <td><code>plusIcon</code></td> <td><code>data-plus-icon</code></td> <td><span class='default-icon-plus'></td> <td>Icon for plus button</td> </tr> <tr> <td><code>minusIcon</code></td> <td><code>data-minus-icon</code></td> <td><span class='default-icon-minus'></td> <td>Icon for minus button</td> </tr> <tr> <td><code>buttonsPosition</code></td> <td><code>data-buttons-position</code></td> <td>default</td> <td>Spinner buttons position: default, left, right</td> </tr> <tr> <td><code>defaultValue</code></td> <td><code>data-default-value</code></td> <td>0</td> <td>Default value, used with method <code>toDefault()</code></td> </tr> <tr> <td><code>minValue</code></td> <td><code>data-min-value</code></td> <td>null</td> <td>Min value for spinner</td> </tr> <tr> <td><code>maxValue</code></td> <td><code>data-max-value</code></td> <td>null</td> <td>Max value for spinner</td> </tr> <tr> <td><code>fixed</code></td> <td><code>data-fixed</code></td> <td>0</td> <td>The count of numbers after dot</td> </tr> <tr> <td><code>repeatThreshold</code></td> <td><code>data-repeat-threshold</code></td> <td>500</td> <td>Threshold for auto repeat in ms</td> </tr> <tr> <td><code>hideCursor</code></td> <td><code>data-hide-cursor</code></td> <td>false</td> <td>Hide cursor in input. Important! To change color in this mode, you must overwrite style for input <code>text-shadow: 0 0 0 @dark;</code></td> </tr> </tbody> </table> <h3 id="_input_events">Events</h3> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Event</th> <th>Data-*</th> <th>Context</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>onBeforeChange(val)</code></td> <td><code>data-on-before-change</code></td> <td>input</td> <td>If this function return false, value can't be changed</td> </tr> <tr> <td><code>onChange(val)</code></td> <td><code>data-on-change</code></td> <td>input</td> <td></td> </tr> <tr> <td><code>onPlusClick(curr, request, real)</code></td> <td><code>data-on-plus-click</code></td> <td>input</td> <td></td> </tr> <tr> <td><code>onMinusClick(curr, request, real)</code></td> <td><code>data-on-minus-click</code></td> <td>input</td> <td></td> </tr> <tr> <td><code>onArrowUp(curr, request, real)</code></td> <td><code>data-on-arrow-up</code></td> <td>input</td> <td></td> </tr> <tr> <td><code>onArrowDown(curr, request, real)</code></td> <td><code>data-on-arrow-down</code></td> <td>input</td> <td></td> </tr> <tr> <td><code>onButtonClick(curr, request, real, 'plus||minus')</code></td> <td><code>data-on-arrow-down</code></td> <td>input</td> <td></td> </tr> <tr> <td><code>onArrowClick(curr, request, real, 'plus||minus')</code></td> <td><code>data-on-arrow-click</code></td> <td>input</td> <td></td> </tr> <tr> <td><code>onSpinnerCreate(input)</code></td> <td><code>data-on-spinner-create</code></td> <td>input</td> <td></td> </tr> </tbody> </table> <h3 id="_input_methods">Methods</h3> <p> You can use methods to interact with input component: <code>toDefault()</code>, <code>val()</code>, <code>val(value)</code>. <code>disable()</code>. <code>enabled()</code>. <code>toggleState()</code>. </p> <pre><code> var input = $(el).data('taginput'); input.val(100); input.toDefault(); </code></pre> <h3 id="_input_customize">Customize</h3> <p> You can customize your input with special attributes: </p> <table class="table cell-border table-border options-table mt-4"> <thead> <tr> <th>Option</th> <th>Data-*</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td><code>clsSpinner</code></td> <td><code>data-cls-spinner</code></td> <td>Additional classes for spinner.</td> </tr> <tr> <td><code>clsSpinnerInput</code></td> <td><code>data-cls-spinner-input</code></td> <td>Additional classes for input element.</td> </tr> <tr> <td><code>clsSpinnerButton</code></td> <td><code>data-cls-spinner-button</code></td> <td>Additional classes for spinner buttons.</td> </tr> <tr> <td><code>clsSpinnerButtonPlus</code></td> <td><code>data-cls-spinner-button-plus</code></td> <td>Additional classes for spinner plus button.</td> </tr> <tr> <td><code>clsSpinnerButtonMinus</code></td> <td><code>data-cls-spinner-button-minus</code></td> <td>Additional classes for spinner minus button.</td> </tr> </tbody> </table> <div class="example"> <input type="text" data-role="spinner" data-cls-spinner-button="fg-white" data-cls-spinner-button-plus="bg-green" data-cls-spinner-button-minus="bg-red" data-cls-spinner-input="bg-light fg-cyan text-bold" data-plus-icon="<span class='mif-arrow-up'></span>" data-minus-icon="<span class='mif-arrow-down'></span>" > </div> <pre><code> <input type="text" data-role="spinner" data-cls-spinner-button="fg-white" data-cls-spinner-button-plus="bg-green" data-cls-spinner-button-minus="bg-red" data-cls-spinner-input="bg-light fg-cyan text-bold" data-plus-icon="<span class='mif-arrow-up'></span>" data-minus-icon="<span class='mif-arrow-down'></span>" > </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>