Range of values

Use InputNumber and neighborLocation. In this case, InputNumber is always used as a controlled component.

import { Flex } from '@semcore/ui/base-components';
import InputNumber from '@semcore/ui/input-number';
import { Text } from '@semcore/ui/typography';
import React from 'react';

const min = 1;
const max = 8;
const Demo = () => {
  const [from, setFrom] = React.useState<string>('');
  const [to, setTo] = React.useState<string>('');
  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}>
        <InputNumber neighborLocation='right'>
          <InputNumber.Value
            min={min}
            max={max}
            value={from}
            onChange={setFrom}
            onBlur={handleBlur}
            placeholder={min.toString()}
            id='basic-example-from'
          />
          <InputNumber.Controls />
        </InputNumber>
        <InputNumber neighborLocation='left'>
          <InputNumber.Value
            min={min}
            max={max}
            value={to}
            onChange={setTo}
            onBlur={handleBlur}
            placeholder={max.toString()}
            id='basic-example-to'
          />
          <InputNumber.Controls />
        </InputNumber>
      </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.

import { Flex } from '@semcore/ui/base-components';
import Button from '@semcore/ui/button';
import InputNumber from '@semcore/ui/input-number';
import { Text } from '@semcore/ui/typography';
import React from 'react';

const Demo = () => {
  const [value, setValue] = React.useState('');
  const inputRef = React.useRef<HTMLInputElement>(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}>
        <Button onClick={decrement} title='Decrease by 10' neighborLocation='right'>
          -
        </Button>
        <InputNumber neighborLocation='both'>
          <InputNumber.Value
            placeholder='0'
            ref={inputRef}
            step={10}
            value={value}
            onChange={setValue}
            id='alternative-example'
          />
        </InputNumber>
        <Button onClick={increment} title='Increase by 10' neighborLocation='left'>
          +
        </Button>
      </Flex>
    </>
  );
};

export default Demo;