numble

Description

numble is a simple jQuery plugin to override the default HTML5 field, to facilitate better cross browser styling and consistency. The default number input renders differently in different browsers making it difficult to match styles. numble hides the original control and adds a new element containing the hidden original. The new control allows the number to be changed using either the mouse scroll wheel or embedded increment and decrement controls.

Installation & Usage

Download or clone the repo and include the jquery.numble.min.js file in your html. numble is a jQuery plugin so be sure it is loaded after jQuery

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="dist/jquery.numble.min.js" charset="utf-8"></script>

numble can then be called on the desired input(s)

$('input[type=number]').numble();

Parameters

numble accepts the following parameters with defaults listed

$('input[type=number]').numble({
  debug: false, // if set to true will log console messages from numble
  includeButtons: true, // if set to false up and down arrows won't be added to the control
  allowNegative: true, // if set to false numble won't decrement the value below zero
  maxValue: undefined, // if set numble won't increment value above setting
  minValue: undefined, // if set numble won't decrement the value below setting, a minValue of 0 will have no effect unless allowNegative is set to false
  initialValue: undefined, // if set numble will set the initial value of the control to this instead of 0 if the field does not already contain a value
  allowScroll: true, // if set to false numble won't bind to the mouse scroll event.
  incrementText: "▲", // numble will display this text for increment
  decrementText: "▼", // numble will display this text for decrement
  allowEdit: true, // if set to false numble control will not be content editable
  hideButtonsOnMinMax: false // if set to true and includeButtons is true, will hide the increment and decrement buttons if the min or max values are reached
});

Styling

numble adds a few elements add classes to the page and control. Inline CSS is not added by numble other than to hide the original input, you will need to provide styles for the control in your own stylesheet or use the demo stylesheet.

.numble-wrapper{
  /* contains the original input and the numble control */
}
 
.numble-control{
  width: 27px;
  height: 21px;
  padding: 10px;
  border: 1px solid #ccc;
  color: #5D8CAE;
  font-family: Arial;
  background-color: #EEEEEE;
  position: relative; /* should probably keep this, the rest can be customized to your liking */
}
 
/* These styles are only applicable if includeButtons is set to true */
.numble-control .numble-arrow{
  position: absolute;
  right: 2px;
  font-size: 0.8em;
  cursor: pointer;
}
 
.numble-control .numble-increment{
  top: 5px;
}
 
.numble-control .numble-decrement{
  top: 20px;
}

Form interactions

numble updates the original hidden field with the number as it changes, the change event of the field is bound to update the display of the control on change.

Changelog

1.0.1

• Add disabled control support

1.0.2

• Add readonly control support, if original control is readonly or disabled, number value cannot be changed with buttons or direct edit
• Prevent increment number value with direct edit beyond min/max values. Number display will revert to previous number on blur.

1.1.0

• Added new setting hideButtonsOnMinMax

Thanks

Based on the excellent jquery-boilerplate/jquery-boilerplate