react-input-number-editor

React component that act like adobe suite editor number input field that can be slided.

Demo

Live demo available here

Features

• Mouse lock on drag
• Custom number decimal precision
• Manual editing of the input
• Editing cancellation
• Increment/decrement the value with arrow up and arrow down key
• Use ctrl and shift key to increment/decrement the value with higher/lesser step
• Change the value from external event
• Customize the step modifier for ctrl and shift key
• Customize the slide modifier for dragging accuracy

Install

$ npm install --save react-input-number-editor

Or

$ yarn add react-input-number-editor

Example

import React, { useState } from 'react';

import InputNumberEditor from 'react-input-number-editor';

function Example() {
    const [value, setValue] = useState(0);

    function handleChange(value) {
        setValue(value);
    }

    return (
        <InputNumberEditor
            value={value}
            min={0}
            max={100}
            precision={1}
            onChange={handleChange}
        />
    );
}

Usage

| Prop | Description | Type | Default | Required | | ------------ | ------------------------------------------------------- | --------- | --------- | -------- | | value | The value to set the input to | number | 0 | Yes | | min | The minimum value reachable | number | - | No | | max | The maximum value reachable | number | - | No | | precision | Number of decimals | number | 0 | No | | step | Number of the stepping | number | 1 | No | | stepModifier | Modifier for the stepping (Ctrl and Shift key) | number | 10 | No | | slideModifier | Modifier for the sliding/dragging mode | string | 0.3 | No | | onChange | Callback called on value change | func | () => () | No |

License

MIT © Vinarnt