input-number-spinner-ui.html

<polymer-element name="input-number-spinner-ui" attributes="value min max step initialDelay changeInterval accelerateManipulation decimalPlaces">
    <template>

        <style>
            #buttonContainer
            {
                display: inline-block;
                width: 1.4em;
                height: 1.4em;
                padding:0;
                margin:0;
                vertical-align: middle;
                min-height: 24px;
            }
            #incButton, #decButton
            {
                min-height: 12px;
                font-size: 40%;
                display: block;
                width: 100%;
                height: 49%;
                padding:0;
                margin:0;
            }
        </style>

        <span id="label"><content></content></span>

        <input type="text" id="counterVal" on-change={{textFieldInputChanged}}" value="{{value}}">

        <div id="buttonContainer">
            <button id="incButton" on-mousedown="{{startIncrementManipulation}}" on-mouseup="{{stopManipulation}}">&#9650;</button>
            <button id="decButton" on-mousedown="{{startDecrementManipulation}}" on-mouseup="{{stopManipulation}}">&#9660;</button>
        </div>

    </template>
    <script>
        Polymer({
            internalValue: 0,

            min: -9999999,

            max: 9999999,

            step: 1,

            inputValue: 0, // Default value

            initialDelay: 500, //in ms

            changeInterval: 110, //in ms

            currentChangeStep: 1,

            accelerateManipulation: true,

            manipulationStart: 0,

            maxManipulationSpeedTime: 8000, //in ms

            maxManipulationSpeedFactor: 200,

            manipulationDirection: 0,

            decimalPlaces: 2,

            value: "0",

            ready: function()
            {
                this.textFieldInputChanged();
            },

            textFieldInputChanged: function()
            {
                var parsedValue = parseFloat(this.value);

                if (!isNaN(parsedValue) && parsedValue != this.internalValue)
                {
                    parsedValue = parseFloat(parsedValue.toFixed(this.decimalPlaces));
                    this.inputValue = Math.min(Math.max(this.min, parsedValue), this.max);
                }
                else
                {
                    this.value = this.internalValue;
                }
            },

            inputValueChanged: function()
            {
                var lastVal = this.internalValue;

                this.internalValue = parseFloat(this.inputValue.toFixed(this.decimalPlaces));

                this.value = this.internalValue;

                if (this.internalValue != lastVal)
                {
                    this.fire('input', {value: this.internalValue});
                }
            },

            startDecrementManipulation: function()
            {
                this.manipulationDirection = -1;

                this.textFieldInputChanged();

                this.currentChangeStep = this.step;

                this.decrementValue();

                this.initContinuousManipulation();
            },

            startIncrementManipulation: function()
            {
                this.manipulationDirection = 1;

                this.textFieldInputChanged();

                this.currentChangeStep = this.step;

                this.incrementValue();

                this.initContinuousManipulation();
            },

            initContinuousManipulation: function()
            {
                this.manipulationStart = Date.now();
                this.scheduleNextValueManipulation(this.initialDelay);
            },

            scheduleNextValueManipulation: function(delay)
            {
                this.async(this.continueValueManipulation, null, delay);
            },

            smoothstep: function(min, max, value)
            {
                var x = Math.max(0, Math.min(1, (value-min)/(max-min)));
                return x*x*(3 - 2*x);
            },

            computeChangeStep: function(t)
            {
                var a = this.smoothstep(0, this.maxManipulationSpeedTime, Math.min(this.maxManipulationSpeedTime, t));

                var newStep = (1.0 - a) * this.step + a * (this.step * this.maxManipulationSpeedFactor);

                newStep = parseFloat(newStep.toFixed(this.decimalPlaces));

                return newStep;
            },

            continueValueManipulation : function()
            {
                if (this.manipulationDirection != 0)
                {
                    if (this.manipulationDirection < 0)
                        this.decrementValue();
                    else
                        this.incrementValue();

                    if (this.accelerateManipulation)
                    {
                        this.currentChangeStep = this.computeChangeStep(Date.now() - this.manipulationStart);
                    }

                    this.scheduleNextValueManipulation(this.changeInterval);
                }
            },

            stopManipulation: function()
            {
                this.manipulationDirection = 0;
            },

            incrementValue: function()
            {
                if ((this.internalValue + this.currentChangeStep) <= this.max)
                    this.inputValue += this.currentChangeStep;
                else
                    this.inputValue = this.max;
            },

            decrementValue: function()
            {
                if ((this.internalValue - this.currentChangeStep) >= this.min)
                    this.inputValue -= this.currentChangeStep;
                else
                    this.inputValue = this.min;
            }
        });
    </script>
</polymer-element>