Slider

tsx

import React from 'react';
import Slider from 'intergalactic/slider';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('medium');
  return (
    <>
      <Text tag='label' size={200} htmlFor='data-chunk-size'>
        Data chunk size
      </Text>
      <Box mt={2}>
        <Slider
          value={value}
          onChange={setValue}
          step={1}
          min={1}
          max={3}
          aria-label='Data chunk size'
          id='data-chunk-size'
          options={[
            { value: 'small', label: 'Small' },
            { value: 'medium', label: 'Medium' },
            { value: 'big', label: 'Big' },
          ]}
        />
      </Box>
    </>
  );
};

export default Demo;

import React from 'react';
import Slider from 'intergalactic/slider';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('medium');
  return (
    <>
      <Text tag='label' size={200} htmlFor='data-chunk-size'>
        Data chunk size
      </Text>
      <Box mt={2}>
        <Slider
          value={value}
          onChange={setValue}
          step={1}
          min={1}
          max={3}
          aria-label='Data chunk size'
          id='data-chunk-size'
          options={[
            { value: 'small', label: 'Small' },
            { value: 'medium', label: 'Medium' },
            { value: 'big', label: 'Big' },
          ]}
        />
      </Box>
    </>
  );
};

export default Demo;

tsx

import React from 'react';
import Slider from 'intergalactic/slider';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('medium');

  return (
    <>
      <Text tag='label' size={200} htmlFor='floppa-size'>
        Floppa size
      </Text>
      <Box mt={2}>
        <Slider
          w={200}
          mb={3}
          value={value}
          onChange={setValue}
          step={1}
          min={1}
          max={3}
          id='floppa-size'
          aria-label='Floapp size'
          options={[
            { value: 'small', label: 'Small Floppa' },
            { value: 'medium', label: 'Medium Floppa' },
            { value: 'big', label: 'Big Floppa' },
          ]}
        >
          <Slider.Bar />
          <Slider.Knob />
          <Slider.Options mt={2}>
            <Slider.Item style={{ transform: 'rotate(-45deg)' }} />
          </Slider.Options>
        </Slider>
      </Box>
    </>
  );
};

export default Demo;

import React from 'react';
import Slider from 'intergalactic/slider';
import { Text } from 'intergalactic/typography';
import { Box } from 'intergalactic/flex-box';

const Demo = () => {
  const [value, setValue] = React.useState('medium');

  return (
    <>
      <Text tag='label' size={200} htmlFor='floppa-size'>
        Floppa size
      </Text>
      <Box mt={2}>
        <Slider
          w={200}
          mb={3}
          value={value}
          onChange={setValue}
          step={1}
          min={1}
          max={3}
          id='floppa-size'
          aria-label='Floapp size'
          options={[
            { value: 'small', label: 'Small Floppa' },
            { value: 'medium', label: 'Medium Floppa' },
            { value: 'big', label: 'Big Floppa' },
          ]}
        >
          <Slider.Bar />
          <Slider.Knob />
          <Slider.Options mt={2}>
            <Slider.Item style={{ transform: 'rotate(-45deg)' }} />
          </Slider.Options>
        </Slider>
      </Box>
    </>
  );
};

export default Demo;

tsx

import React from 'react';
import Slider from 'intergalactic/slider';
import InputNumber from 'intergalactic/input-number';
import Tooltip from 'intergalactic/tooltip';
import { Box, Flex } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';

const Demo = () => {
  const [value, setValue] = React.useState(51);
  const [error, setError] = React.useState('');
  const min = 10;
  const max = 100;

  const handleInput = (value) => {
    if (!!value && (value > max || value < min)) {
      setError('Please enter a valid value');
      setValue(value);
    } else {
      setError('');
      setValue(value);
    }
  };

  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='slider-represantation'>
        Slider representation
      </Text>
      <Box w={140}>
        <Slider
          id='slider-represantation'
          aria-label='Number slider representation'
          mb={4}
          value={value}
          onChange={setValue}
          step={1}
          min={min}
          max={max}
        >
          <Slider.Bar />
          <Slider.Knob />
        </Slider>
      </Box>
      <Text tag='label' size={200} htmlFor='numeric-value-represantation'>
        Numeric value representation
      </Text>
      <Tooltip
        title={`Please enter a valid value within ${min} and ${max}.`}
        visible={!!error}
        interaction='click'
        theme='warning'
        placement='right'
      >
        <InputNumber mt={2} w={80} size='m' state={error ? 'invalid' : 'normal'}>
          <InputNumber.Value
            id='numeric-value-represantation'
            step={1}
            value={value.toString()}
            onChange={handleInput}
          />
          <InputNumber.Controls showControls />
        </InputNumber>
      </Tooltip>
    </Flex>
  );
};

export default Demo;

import React from 'react';
import Slider from 'intergalactic/slider';
import InputNumber from 'intergalactic/input-number';
import Tooltip from 'intergalactic/tooltip';
import { Box, Flex } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';

const Demo = () => {
  const [value, setValue] = React.useState(51);
  const [error, setError] = React.useState('');
  const min = 10;
  const max = 100;

  const handleInput = (value) => {
    if (!!value && (value > max || value < min)) {
      setError('Please enter a valid value');
      setValue(value);
    } else {
      setError('');
      setValue(value);
    }
  };

  return (
    <Flex direction='column'>
      <Text tag='label' size={200} htmlFor='slider-represantation'>
        Slider representation
      </Text>
      <Box w={140}>
        <Slider
          id='slider-represantation'
          aria-label='Number slider representation'
          mb={4}
          value={value}
          onChange={setValue}
          step={1}
          min={min}
          max={max}
        >
          <Slider.Bar />
          <Slider.Knob />
        </Slider>
      </Box>
      <Text tag='label' size={200} htmlFor='numeric-value-represantation'>
        Numeric value representation
      </Text>
      <Tooltip
        title={`Please enter a valid value within ${min} and ${max}.`}
        visible={!!error}
        interaction='click'
        theme='warning'
        placement='right'
      >
        <InputNumber mt={2} w={80} size='m' state={error ? 'invalid' : 'normal'}>
          <InputNumber.Value
            id='numeric-value-represantation'
            step={1}
            value={value.toString()}
            onChange={handleInput}
          />
          <InputNumber.Controls showControls />
        </InputNumber>
      </Tooltip>
    </Flex>
  );
};

export default Demo;