Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

number-unit-editor

1.0.1 • Public • Published

number-unit-editor

unstable

This extends number-editor to allow for units like px, %, in, etc. This effectively makes it very similar to the CSS value editors in Chrome Dev Tools.

var opts = {
    min: 0,
    max: 100,
    value: 5,
    decimals: 0,
    unit: 'px', //default unit to show
}
 
require('domready')(function() {
    var spinner = require('number-unit-editor')(opts)
    document.body.appendChild(spinner.element)
})

Note: Currently untested on mobile devices; PRs welcome.

Usage

NPM

The API and constructor options are the same as number-editor.

editor = createEditor([options])

In addition to the base number-editor options:

  • unit: the default unit string to append
  • validUnits: an array of units to accept, if undefined any unit is accepted

editor.value

A getter/setter for the number value. The returned value will be a number, but if you set this as a string it will parse it appropriately.

//e.g. say the display currently shows "50px"
console.log(spinner.value) // prints 50
spinner.value = 25  // changes value to 25px
spinner.value = '25' // changes value to 25 (no unit)
spinner.value = '50px' // changes value to 25px
 

editor.display

A getter/setter for the string display. When passing strings, you should include the unit.

console.log( spinner.display ) // prints "50px"

License

MIT, see LICENSE.md for details.

install

npm i number-unit-editor

Downloadsweekly downloads

0

version

1.0.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability