Slider with unit

Compont field Ranger slider (polaris) kèm theo input hiển thị value và đơn vị

Ví dụ

import { SliderWithUnit } from '@xobuilder/ui';

export const Demo = () => {
  const [value, setValue] = useState<SliderWithUnitValue>({
    value: 0,
    unit: 'px',
  });

  const handleChange = (valueUpdate: SliderWithUnitValue) => {
    console.log(valueUpdate);
    setValue(valueUpdate);
  };

  return (
    <SliderWithUnit
      value={value}
      placeholder="auto"
      max={100}
      min={0}
      step={1}
      haveUnit={true}
      options={['px', 'em']}
      onChange={handleChange}
    />
  )
}

SliderWithUnit Props

Name	Type	Default	Description
value	number	Giá trị của field
placeholder	string	Placeholder của text field
max	number	-	Giá trị max
min	number	-	Giá trị min
step	number	-	Step của slider
haveUnit	boolean	-	Field có unit hay không
unit	string	-	Đơn vị của field
options	string[]	-	Các option unit có thể thay đổi
onChange	`(value: number	string	RangeSliderValue) => void`