AngleSlider

Pick an angle value between 0 and 360 degrees

Import: import { AngleSlider } from 'react-native-mantine';

Usage

import { AngleSlider } from 'react-native-mantine';

<AngleSlider
  value={angle}
  onChange={setAngle}
  onChangeEnd={(value) => console.log(value)}
  size={100}
/>

// Snap to marks
<AngleSlider
  defaultValue={90}
  marks={[
    { value: 0 },
    { value: 90 },
    { value: 180 },
    { value: 270 },
  ]}
  restrictToMarks
/>

Props

Prop	Type	Default	Description
`value`	`number`		Controlled value in degrees, 0-359
`defaultValue`	`number`		Default value for uncontrolled component
`onChange`	`(value: number) => void`		Called on value change
`onChangeEnd`	`(value: number) => void`		Called after the dragging is finished
`size`	`number`	`60`	Slider diameter in px
`thumbSize`	`number`		Thumb diameter in px, calculated based on size by default
`step`	`number`	`1`	Step between values in degrees
`withLabel`	`boolean`	`true`	Determines whether the label should be displayed inside the slider
`formatLabel`	`(value: number) => React.ReactNode`		Formats label based on the value
`marks`	`{ value: number; label?: string }[]`		Marks displayed on the slider
`restrictToMarks`	`boolean`	`false`	If set, the value is always snapped to the closest mark
`color`	`MantineColor`	`theme.primaryColor`	Key of theme.colors or any valid color, controls thumb and marks color
`disabled`	`boolean`	`false`	If set, the slider is disabled
`labelStyle`	`TextStyle`		Label text style
`style`	`ViewStyle`		Additional styles to apply to the root element

Source on GitHub · npm