InputNumber & InputRange
Range of values
Use InputNumber and NeighborLocation components. In this case, InputNumber is always used as a controlled component.
tsx
import React from 'react';
import InputNumber from 'intergalactic/input-number';
import NeighborLocation from 'intergalactic/neighbor-location';
import { Flex } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';
const min = 1;
const max = 8;
const Demo = () => {
const [from, setFrom] = React.useState(undefined);
const [to, setTo] = React.useState(undefined);
const handleBlur = React.useCallback(() => {
if (from > to) {
setFrom(to);
setTo(from);
}
}, [from, to]);
return (
<>
<Text tag='p' size={200}>
<Text tag='label' htmlFor='basic-example-from'>
From
</Text>
/
<Text tag='label' htmlFor='basic-example-to'>
To
</Text>
</Text>
<Flex w='20%' mt={2}>
<NeighborLocation>
<InputNumber>
<InputNumber.Value
min={min}
max={max}
value={from}
onChange={setFrom}
onBlur={handleBlur}
placeholder={min.toString()}
id='basic-example-from'
/>
<InputNumber.Controls />
</InputNumber>
<InputNumber>
<InputNumber.Value
min={min}
max={max}
value={to}
onChange={setTo}
onBlur={handleBlur}
placeholder={max.toString()}
id='basic-example-to'
/>
<InputNumber.Controls />
</InputNumber>
</NeighborLocation>
</Flex>
</>
);
};
export default Demo;
Appearance customization
You have the ability to customize the component's appearance. To ensure the step calculation is accurate, utilize the internal API's native input.
tsx
import React from 'react';
import NeighborLocation from 'intergalactic/neighbor-location';
import InputNumber from 'intergalactic/input-number';
import Button from 'intergalactic/button';
import { Flex } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';
const Demo = () => {
const [value, setValue] = React.useState('');
const inputRef = React.useRef(null);
const decrement = React.useCallback(() => {
inputRef.current.stepDown();
}, []);
const increment = React.useCallback(() => {
inputRef.current.stepUp();
}, []);
return (
<>
<Text tag='label' htmlFor='alternative-example' size={200}>
Members count
</Text>
<Flex w={100} mt={2}>
<NeighborLocation>
<Button onClick={decrement} aria-label='Decrease members count by 10'>
-
</Button>
<InputNumber>
<InputNumber.Value
placeholder='0'
ref={inputRef}
step={10}
value={value}
onChange={setValue}
id='alternative-example'
/>
</InputNumber>
<Button onClick={increment} aria-label='Increase members count by 10'>
+
</Button>
</NeighborLocation>
</Flex>
</>
);
};
export default Demo;