InputNumber & InputRange

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;

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;

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;

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;