Angle Slider - Mantine

import { AngleSliderDemos, UseRadialMoveDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.AngleSlider);

Usage

Use the AngleSlider component to pick an angle value between 0 and 360:

Controlled

The AngleSlider value is a number between 0 and 360.

tsx

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 can be used with uncontrolled forms. Set the name attribute to include slider value in FormData object on form submission. To control initial value in uncontrolled forms, use defaultValue prop.

Props for usage with uncontrolled forms:

name – name attribute passed to the hidden input
hiddenInputProps – additional props passed to the hidden input

Example of uncontrolled AngleSlider with FormData:

tsx

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" defaultValue={120} />
      <button type="submit">Submit</button>
    </form>
  );
}

formatLabel

Use the formatLabel prop to change the angle label format. It accepts a function that takes the angle value and returns a React node:

Marks

Set the marks prop to display marks on the slider. A mark is an object with a value (required, number between 0 and 360) and label (optional, React node). To restrict selection to marks only, set the restrictToMarks prop:

onChangeEnd

The onChangeEnd callback fires when the user stops dragging the slider or changes its value with the keyboard. Use it as a debounced callback to prevent frequent updates.

disabled

The disabled prop disables the component and prevents user interaction:

Accessibility

To make the component accessible for screen readers, set the aria-label prop:

tsx

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

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

Keyboard interactions when the component is focused:

Based on use-radial-move

AngleSlider is based on the use-radial-move hook. You can build a custom radial slider using this hook if you need more control over the component's behavior.