react-input-number-editor v1.0.8

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

License

MIT © Vinarnt