Need private packages and team management tools?Check out npm Teams »

react-native-slider-circular-drag

1.0.2 • Public • Published

## 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
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

Install

npm i react-native-slider-circular-drag

DownloadsWeekly Downloads

2

Version

1.0.2

License

ISC

Unpacked Size

40.5 kB

Total Files

7

Last publish

Collaborators

  • avatar