Slider
Slider with options
tsx
import React from 'react';
import Slider from '@semcore/ui/slider';
import { Text } from '@semcore/ui/typography';
import { Box } from '@semcore/ui/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;
Customized options view
tsx
import React from 'react';
import Slider from '@semcore/ui/slider';
import { Text } from '@semcore/ui/typography';
import { Box } from '@semcore/ui/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;
Numeric slider
The Slider can be used in conjunction with the InputNumber component. Additionally, if you input a value that is either too large or too small into the InputNumber, an error will be displayed.
tsx
import React from 'react';
import Slider from '@semcore/ui/slider';
import InputNumber from '@semcore/ui/input-number';
import Tooltip from '@semcore/ui/tooltip';
import { Box, Flex } from '@semcore/ui/flex-box';
import { Text } from '@semcore/ui/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;
Last updated: