AngleSlider

AngleSlider

0에서 360 사이의 각도 값을 고르는 컴포넌트예요. 방사형 슬라이더 형태로 각도를 선택할 때 사용해요.

출처: 문서

본문

Usage

AngleSlider 컴포넌트로 0에서 360 사이의 각도 값을 고를 수 있어요.

import { AngleSlider } from '@mantine/core';

function Demo() {
  return <AngleSlider formatLabel={(value) => `${value}°`} />;
}

Controlled

AngleSlider 값은 0에서 360 사이의 숫자예요.

import { useState } from 'react';
import { AngleSlider } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState(180);
  return <AngleSlider value={value} onChange={setValue} />;
}

AngleSlider with uncontrolled forms

AngleSlider는 비제어 폼(uncontrolled forms)과 함께 사용할 수 있어요. name 속성을 설정하면 폼 제출 시 슬라이더 값을 FormData 객체에 포함시킬 수 있어요. 비제어 폼에서 초기 값을 제어하려면 defaultValue prop을 사용하세요.

비제어 폼에서 사용하는 props:

• name – hidden input에 전달되는 name 속성
• hiddenInputProps – hidden input에 전달되는 추가 props

FormData와 함께 비제어 AngleSlider를 사용하는 예시:

import { AngleSlider } from '@mantine/core';

export function WithFormData() {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        console.log('Checkbox group value:', formData.get('angle'));
      }}
    >
      <AngleSlider name="angle" />
      <button type="submit">Submit</button>
    </form>
  );
}

formatLabel

formatLabel prop으로 각도 라벨 형식을 바꿀 수 있어요. 각도 값을 받아 React 노드를 반환하는 함수를 받아요.

import { AngleSlider } from '@mantine/core';

function Demo() {
  return <AngleSlider formatLabel={(value) => `${value}°`} />;
}

Marks

marks prop으로 슬라이더에 표시점(marks)을 표시할 수 있어요. 마크는 값(필수, 0~360 사이 숫자)과 라벨(선택, React 노드)을 가진 객체예요. 선택을 마크로만 제한하려면 restrictToMarks prop을 설정하세요.

import { AngleSlider, Group } from '@mantine/core';

function Demo() {
  return (
    <Group>
      <AngleSlider
        formatLabel={(value) => `${value}°`}
        size={100}
        restrictToMarks
        marks={[
          { value: 0 },
          { value: 45 },
          { value: 90 },
          { value: 135 },
          { value: 180 },
          { value: 225 },
          { value: 270 },
          { value: 315 },
        ]}
      />

      <AngleSlider
        formatLabel={(value) => `${value}°`}
        size={100}
        marks={[
          { value: 0, label: '0°' },
          { value: 45, label: '45°' },
          { value: 90, label: '90°' },
          { value: 135, label: '135°' },
          { value: 180, label: '180°' },
          { value: 225, label: '225°' },
          { value: 270, label: '270°' },
          { value: 315, label: '315°' },
        ]}
      />
    </Group>
  );
}

onChangeEnd

onChangeEnd 콜백은 사용자가 슬라이더 드래그를 멈추거나 키보드로 값을 바꿀 때 발생해요. 디바운스된 콜백으로 사용해 잦은 업데이트를 방지할 수 있어요.

import { useState } from 'react';
import { AngleSlider, Text } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState(0);
  const [endValue, setEndValue] = useState(0);

  return (
    <>
      <AngleSlider value={value} onChange={setValue} onChangeEnd={setEndValue} />
      <Text>Current value: {value}</Text>
      <Text>End value: {endValue}</Text>
    </>
  );
}

disabled

disabled prop은 컴포넌트를 비활성화하고 사용자 상호작용을 막아요.

Accessibility

컴포넌트를 스크린 리더가 접근할 수 있게 하려면 aria-label prop을 설정하세요.

import { AngleSlider } from '@mantine/core';

function Demo() {
  return <AngleSlider aria-label="Rotation angle" />;
}

컴포넌트가 포커스됐을 때의 키보드 상호작용:

Based on use-radial-move

AngleSlider는 use-radial-move 훅을 기반으로 해요. 컴포넌트 동작을 더 세밀하게 제어해야 한다면 이 훅으로 커스텀 방사형 슬라이더를 만들 수 있어요.

import { useState } from 'react';
import { Box } from '@mantine/core';
import { useRadialMove } from '@mantine/hooks';
import classes from './Demo.module.css';

function Demo() {
  const [value, setValue] = useState(115);
  const { ref } = useRadialMove(setValue);

  return (
    <Box ref={ref} className={classes.root} data-value={value}>
      {value}°
    </Box>
  );
}

더 알아보기 (Learn more)

• AlphaSlider
• Checkbox