# # Number component

The number component is used for number inputs. Its features include the input number range, the step gradient, the display effects, etc.

## # Code example

    <html>
        <template id="layout-template">
            <webpdf>
                <div class="flex-container">
                    <number @tooltip tooltip-placement="right" tooltip-title="Any non numeric characters will be rejected" min="0"></number>
                    <number @tooltip tooltip-title="min=0,max=100,step=0.1" min="0" max="100" step="0.1"></number>
                    <number @tooltip tooltip-title="use prefix and suffix" min="0" max="100" step="0.1" prefix="about " suffix="%"></number>
                </div>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <style>
        .flex-container {
            display: flex;
        }
    </style>
    <script>
        var CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){}
        });
        var libPath = window.top.location.origin + '/lib';
        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                appearance: CustomAppearance,
                addons: []
        });
    </script>

## # API

### # Number component template

    <number min="0" max="100" step="0.1" prefix="about " suffix="%"></number>

### # Methods

Method | Description | Version
--- | --- | ---
setValue(value: number) | Set the value. If the value is not in the specified range and step, it will be automatically formatted. Calling this method won't trigger the `change` event. | 7.1.0
getValue(): number | Get the current value | 7.1.0

## # Events

Name | Description | Sample | Version
--- | --- | --- | ---
`change` | Triggered when the user enters a number and blurs focus | `number.on('change', (newValue, oldValue) => void)` | 7.1.0