Created as a helper for configurations steps in different apps, for example you may have a e-book app where the author can configure his book chapters:
Chapter 1: 1-10
(1 to 10 pages)
Chapter 2: 11-76
(11 to 76 pages)
etc...
Click here for the demo: InputToRange demo on firebase
Distributed via npm which is bundled with node and should be installed as one of your project's dependencies:
npm install --save input-to-range
This package also depends on react and react-dom. Please make sure you have those installed as well.
import React from 'react';
import { InputToRange } from 'input-to-range';
function App() {
const [labels, setLabels] = useState(['10-30', '150-170']);
return (
<div>
<InputToRange
labels={labels}
onChange={ev => {
console.log(ev.labels); // labels
console.log(ev.ranges); // ranges
}}
/>
</div>
);
}
In the project directory, you can run:
npm run build
-> runs tests and creates the build
npm run test
-> runs tests
npm run watch
-> watches over files for development
array of number or strings like discribed above
This is useful if you want to start with default values
boolean
Show/Hide the built in labels
boolean
If set on true no default styles will be applied
function
When you create a new label it will call this function with a property of this type:
{ labels: ['100', '101-103'], ranges: [[100], [101,102,103]] }
allowIntersection
// don't allow duplicates inside the 2d arrays
onlyPossitiveNumbers
// allow only positive numbers
onlyNegativeNumbers
// allow only positive numbers
keys
// override the existing keys SPACE and ENTER
Click here for the demo: InputToRange demo on firebase
MIT