react-native-slider-circular-drag

This is a continuation of the work from the user marcelobarbosaO, who made the initial component;
https://github.com/marcelobarbosaO/react-native-slider-circular-drag

Installation

The project requires react-native-svg to render, so follow these steps to get it up and running:

npm install --save react-native-svg

After it has installed, you must link it:

react-native link react-native-svg

And finally install react-native-slider-circular-drag

npm install --save react-native-slider-circular-drag

Features

• Gradient integration
• Scalable design
• Customizable start location
• Many configurable options

Usage

import CircleSlider from 'react-native-slider-circular-drag';
...
...
render() {
	return (
		<CircleSlider 
			arcDirection={'CW'}
            backgroundColor={"white"}
            btnRadius={20}
            sliderRadius={130}
            sliderWidth={25}
            startDegree={0}
            maxValue={360}
            onPressInnerCircle={(value) => console.log(`Inner: ${value}`)}
            onPressOuterCircle={(value) => console.log(`Outer: ${value}`)}
            onValueChange={(value) => console.log(`Changed: ${value}`)}
            endGradient={"#A6FFCB"}
            startGradient={"#12D8FA"}
		/>
	)
} 

Props

|Name |Default |Description |Type | |--|--|--|--| |arcDirection | "CW" |Determines direction of the slider, clockwise or counterclockwise. | string ["CW", "CCW"] | |backgroundColor | "white" |Determines the colour of the sliders background. | string | |btnRadius | 13 |Determines the radius of the slider button. | number | |decimalPlaces | 0 |Determines the amount of decimals in the value. | number| |endGradient | "#A6FFCB" |Determines the end gradient of the slider. | string | |maxValue | 360 |Determines the max value of the slider. | number | |onPressInnerCircle | (value) => |Callback with value as a parameter when the inner circle is pressed. | callback | |onPressOuterCircle |(value) => |Callback with value as a parameter when the outer circle is pressed. | callback | |onValueChange |(value) => |Callback with value as a parameter when the value changes. | callback | callback | |showValue | true |Determines if the value will be shown as text in the inner circle. | boolean | |sliderRadius | 130 |Determines the radius of the slider. | number | |sliderWidth | 25 |Determines the width of the slider. | number | |startDegree | 0 |Determines the starting position of the slider. | number | |startGradient | "#12D8FA" |Determines the starting gradient of the slider. | string | |textColor | "white" |Determines the colour of the inner circle text. | string | |textSize | 50 |Determines the size of the inner circle text. | number | |value | 0 |Determines the current value for the slider. | number |