Input Number

Creates a numeric input field with the option to increase or decrease the value step-by-step.

Superkube contains only CSS/SCSS and does not contain Javascript. Because Superkube is independent of the implementation, you build the environment you need.

All the javascript is just for example and to show how the modules work.

Usage #

Wrap an input to input-number class and add number up and down inside.

- +


<div class="input-number">
    <span class="input-number-down">-</span>
    <span class="input-number-up">+</span>
    <input class="input" type="number" min="1" max="9" step="1" value="1">
</div>

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.


// params
--input-number-space: 40px;
--input-number-size: 16px;