open-index/open-npm huggingface dataset:
npm package: @lokua/number-box
Description: React text input with draggable number value similar to MaxMSP GUI elements
Latest version: 4.0.0

# number-box

React text input with draggable number value.

**[demo](https://lokua.github.io/number-box)**

## Install

```sh
npm i @lokua/number-box
```

## Usage

```js
import NumberBox from '@lokua/number-box'

// Values below represent the default values
const numberBox = (
  <NumberBox
    value={value}
    min={0}
    max={100}
    step={1}
    // General amount of pixels it takes to drag from min to max
    pixelRange={150}
    onChange={(value) => {
      // store value
    }}
  />
)
```

## UX Notes

### Manual Input

To edit the value manually you need to double click the input which will
automatically put the input in focus, select the text content, and allow typing.

### Step Precision

The `step` prop represents what value the result of a drag operation will be
quantized or "snapped" to, otherwise if we strictly only allowed moving by
`step`, then for example a range of 100_000 and a step of 1 would take about 53
average computer screen's worth of dragging to get from min to max - not a great
user experience! Fortunately for precision - besides typing into the input
manually - you can hold shift while dragging to make fine adjustments that
exactly `step` increments.

## Styles

NumberBox does not ship with any styles in order to make customization as easy
as possible

## Prior Art

Implementation is loosely based on Dat GUI's
[NumberControllerBox](https://github.com/dataarts/dat.gui/blob/master/src/dat/controllers/NumberControllerBox.js)
and NexusUI's
[Number](https://github.com/nexus-js/ui/blob/master/lib/interfaces/number.js).

## License

MIT