@zaradev/react-native-circular-slider NPM

Circular Gauge

3 types Circular Slider Component for React Native.

Support type

Amount: amount of the total amount
Percent: percentages of total amount
Duration: start and end in total amount

Installation

npm install --save @zaradev/react-native-circular-slider

yarn add @zaradev/react-native-circular-slider

Peer Dependencies

react-natie-reanimated(v2)
react-native-gesture-handler

Example

Screen Shot 2022-07-28 at 04 25 07 AM

Anatomy

The name refers to Material UI.

Screen Shot 2022-07-28 at 04 19 56 AM

Usage

const [size, setSize] = useState(200);
const [amount, setAmount] = useState(25);
const [percents, setPercents] = useState([40, 30, 20, 10]);
const [duration, setDuration] = useState({
  start: 10,
  end: 50,
});
const [clockwise, setClockwise] = useState(true);

return (
  <>
    <AmountSlider
      size={size}
      amount={amount}
      onChange={setAmount}
      clockwise={clockwise}
    />
    <PercentSlider
      percents={percents}
      size={size}
      onChange={setPercents}
      clockwise={clockwise}
    />
    <DurationSlider
      size={size}
      duration={duration}
      onChange={setDuration}
      clockwise={clockwise}
    />
  </>
);

Properties

Amount

Name	Description	Type	Required	Default
amount		number	✅
thumbColor	color of thumb	string	❌	#FFA500
thumbIcon	Icon component to be displayed in the center of the thumb	ReactNode	❌
filledColor	color of filled gauge	string	❌	#FFE5B4
onChange	called when the amount value is changed	function(amount: number)	❌

Percent

Name	Description	Type	Required	Default
percents		number[]	✅
thumbColor	color of thumb	string[]	❌	#FFA500
thumbIcon	Icon component to be displayed in the center of the thumb	ReactNode[]	❌
filledColor	color of filled gauge	string[]	❌	#FFE5B4
onChange	Called when the percents value is changed	function(percents: number[])	❌

Duration

Name	Description	Type	Required	Default
duration		{start: number; end: number;}	✅
thumbColor	color of thumb	string	❌	#FFA500
thumbIcon	Icon component to be displayed in the center of the thumb	{start: ReactNode, end: ReactNode}	❌
filledColor	color of filled gauge	string	❌	#FFE5B4
onChange	Called when the duration value is changed	function(duration: {start: number; end: number;})	❌

Common

Name	Description	Type	Required	Default
size	size of slider	number	✅
clockwise	rotation direction	boolean	❌	true

Track Options

Name	Description	Type	Required	Default
width	width of track	number	❌	10% of size
color	color of track	string	❌	#7F8487

Tick Mark Options

Name	Description	Type	Required	Default	Amount	Percent	Duration
show	If you need to render Tick Mark	Boolean	❌	false	✅	✅	✅
total	maximum value of slider	Number	❌	100	✅	❌	✅
unit	Tick Mark division unit	Number	❌	5	✅	❌	✅
color	color of Tick Mark	String	❌	#7F8487	✅	✅	✅
length	legnth of Tick Mark	Number	❌	10	✅	✅	✅
thickness	thickness of Tick Mark	Boolean	❌	2	✅	✅	✅
showText	If you need to render Tick Mark units	String	❌	show option value	✅	✅	✅
textSize	size of text	Number	❌	10	✅	✅	✅
textColor	color of text	Number	❌	#191919	✅	✅	✅