Counter UI control

Counter is a spin-box that allows selecting a number by clicking "+" and "-" buttons or by inserting a number manually in the input field.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Overview

Counter can be particularly useful if you create a form with numeric inputs. Counter provides easier input and doesn’t allow string values to be submitted. Counter validation should be tuned by a developer.

Counter configuration

To configure this control you can set the minimal, maximal, and initial values. By clicking the '+' or '-' icon you can decrease or increase the value by one, which is the default step value that can be changed.

Main properties allow setting a text label for the counter. Alignment properties allow changing the position of the label relative to its container, as well as setting the position of the counter with relation to its parent element.

Click on the '+' icon to increase the value by 5