# react-native-circular-multiple-slider > React Native component for circular multiple slider and pie chart Latest version **2.0.0** (published 2020-06-08) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-circular-multiple-slider pnpm add react-native-circular-multiple-slider yarn add react-native-circular-multiple-slider bun add react-native-circular-multiple-slider ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.0 | | Published | 2020-06-08 | | First published | 2019-11-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 595.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 17 | | Author | Ibrahim Sulaiman | | Maintainers | ibrahim.kce | | Keywords | react, react-native, multiple-slider, slider, pie-chart, divider, divider-icon, svg, circular, circle, round, react-component | ## Links - npm: https://www.npmjs.com/package/react-native-circular-multiple-slider - Repository: https://github.com/IbrahimSulai/react-native-circular-multiple-slider - Homepage: https://github.com/IbrahimSulai/react-native-circular-multiple-slider.git - Issues: https://github.com/IbrahimSulai/react-native-circular-multiple-slider/issues - npm.io page: https://npm.io/package/react-native-circular-multiple-slider ## Dependencies (2) - [lodash.range](https://npm.io/package/lodash.range.md) ^3.2.0 - [react-native-svg](https://npm.io/package/react-native-svg.md) 9.7.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.0.0 (latest) — 2020-06-08 - 1.1.2 — 2020-06-08 - 1.1.1 — 2020-06-08 - 1.1.0 — 2020-06-08 - 1.0.10 — 2019-12-08 - 1.0.9 — 2019-11-17 - 1.0.8 — 2019-11-17 - 1.0.7 — 2019-11-17 - 1.0.6 — 2019-11-17 - 1.0.5 — 2019-11-17 - 1.0.4 — 2019-11-17 - 1.0.3 — 2019-11-17 - 1.0.2 — 2019-11-17 - 1.0.1 — 2019-11-17 - 1.0.0 — 2019-11-17 ## README [![license](https://img.shields.io/github/license/mashape/apistatus.svg)]() [![Supports Android and iOS](https://img.shields.io/badge/platforms-android%20|%20ios-lightgrey.svg)]() [![Version](https://img.shields.io/npm/v/react-native-circular-multiple-slider.svg)](https://www.npmjs.com/package/react-native-circular-multiple-slider) # react-native-circular-multiple-slider React Native component for circular multiple slider and pie chart. ## Example app: It's an example with this package ![SliderWithCircleDivider](SliderWithCircleDivider.gif)          ![SliderWithSquareDivider](SliderWithSquareDivider.gif) ![SliderWithIconDivider](SliderWithIconDivider.gif)          ![SliderWithTextDividerComponent](SliderWithTextDividerComponent.gif) ![SliderWithoutDivider](SliderWithoutDivider.png)         ![PieChartWithTextDividerComponent](PieChartWithTextDividerComponent.png)         ![PieChartWithIconDividerComponent](PieChartWithIconDividerComponent.png) ## Features: - Slider with Circle Divider - Slider with Square Divider - Slider with Bar Divider - Slider with Icon Divider - Slider with Text Divider Component - Slider without Divider - PieChart with Text Divider Component - PieChart with Icon Divider Component ## Installation 1. Install library and react-native-svg `npm i --save react-native-circular-multiple-slider react-native-svg@9.7.1` 2. Link native code for SVG `react-native link react-native-svg` and install cocoapods in the ios project `pod install` ## Usage Import Circular Multiple Slider ```js import CircularSlider from 'react-native-circular-multiple-slider'; ``` Use as follows: ```jsx ``` ## Configuration You can configure the passing by following props: ### Props - [`style`](#style) - [`values`](#values) - [`colors`](#colors) - [`onUpdate`](#onupdate) - [`componentType`](#componentype) - [`dividerComponent`](#dividercomponent) - [`dividerComponentSize`](#dividercomponentsize) - [`minimumStopValue`](#minimumstopvalue) - [`slideDividerType`](#slidedividertype) - [`slideDividerIcon`](#slidedividericon) - [`hideSlideDividerType`](#hideslidedividertype) - [`onPanResponderGrant`](#onpanrespondergrant) - [`onPanResponderRelease`](#onpanresponderrelease) - [`borderWidth`](#borderwidth) - [`strokeWidth`](#strokewidth) - [`radius`](#radius) - [`separatorColor`](#separatorcolor) --- ### Methods - [`updateValues`](#updatevalues) --- ### `style` Used to style and layout the `Multiple Circular Slider`. See `StyleSheet.js` and `ViewStylePropTypes.js` for more info. | Type | Required | | ---------- | -------- | | View.style | No | --- ### `values` values is a mandatory prop. This an array of values which used to render the pie chart or multiple circular slider. | Type | Required | Platform | | ----- | -------- | ------------ | | array | Yes | iOS, Android | --- ### `colors` colors is a mandatory prop. This an array of colors which used to apply the color for the pie chart or multiple circular slider. | Type | Required | Platform | | ----- | -------- | ------------ | | array | Yes | iOS, Android | --- ### `onUpdate` onUpdate is an prop method, used to handle the updated callback for this multiple circular slider component. | Type | Required | Platform | | ---- | -------- | ------------ | | func | Yes | iOS, Android | --- ### `componentType` componentType is a type, which will decide wheather it is pie-chart or multiple circular slider component. | Type | Required | Values | Default Value | Platform | | ------ | -------- | ----------------- | ------------- | ------------ | | string | No | Slider, Pie_Chart | Slider | iOS, Android | --- ### `dividerComponent` dividerComponent is array of component, which used to render between the divider portions. | Type | Required | Platform | | ----- | -------- | ------------ | | array | No | iOS, Android | --- ### `dividerComponentSize` dividerComponent is size of component, which is the size of the component rendered between the divider portions. | Type | Required | Default Value | Platform | | ------ | -------- | ------------- | ------------ | | number | No | 50 | iOS, Android | --- ### `minimumStopValue` minimumStopValue is value of the divider progress can move until this minimum value. | Type | Required | Default Value | Platform | | ------ | -------- | ------------- | ------------ | | number | No | 1 | iOS, Android | --- ### `slideDividerType` slideDividerType is a type, which will decide the type of the slide divider. | Type | Required | Values | Default Value | Platform | | ------ | -------- | ------------------------- | ------------- | ------------ | | string | No | Circle, Square, Bar, Icon | Circle | iOS, Android | --- ### `slideDividerIcon` slideDividerIcon is the icon used for the slideDivider, if the slideDividerType is icon. | Type | Required | Platform | | ---- | -------- | -------- | | any | No | iOS, Android | --- ### `hideSlideDividerType` hideSlideDividerType will decide the visibility of the SlideDivider | Type | Required | Values | Default Value | Platform | | ---- | -------- | ----------- | ------------- | ------------ | | bool | No | false, true | false | iOS, Android | --- ### `onPanResponderGrant` onPanResponderGrant is an prop method, used to handle the slider grant callback, this method will get called whenever the slider starts sliding. | Type | Required | Platform | | ---- | -------- | ------------ | | func | Yes | iOS, Android | --- ### `onPanResponderRelease` onPanResponderRelease is an prop method, used to handle the slider release callback, this method will get called whenever the slider release from the sliding. | Type | Required | Platform | | ---- | -------- | ------------ | | func | Yes | iOS, Android | --- ### `borderColor` borderColor is the color for the border. | Type | Required | Platform | | ---- | -------- | -------- | | string | No | iOS, Android | --- ### `borderWidth` borderWidth is the width of the border. | Type | Required | Default Value | Platform | | ------ | -------- | ------------- | ------------ | | number | No | 3 | iOS, Android | --- ### `strokeWidth` strokeWidth is the width of the stroke for the pie-chart or circular multiple slider. | Type | Required | Default Value | Platform | | ------ | -------- | ------------- | ------------ | | number | No | 30 | iOS, Android | --- ### `radius` radius is the radius for the pie-chart or circular multiple slider. | Type | Required | Default Value | Platform | | ------ | -------- | ------------- | ------------ | | number | No | 120 | iOS, Android | --- ### `separatorColor` separatorColor is the separator color for the slider arc of the pie-chart or circular multiple slider. | Type | Required | Default Value | Platform | | ------ | -------- | ------------- | ------------ | | string | No | #171717 | iOS, Android | --- ## Methods ### `updateValues` updateValues is the method in this package which can be used to update the values at run time by accessing via reference of the pie-chart or circular multiple slider. ## Parameter - values - This an array of values which used to render the pie chart or multiple circular slider. | Type | Parameters | Platform | | ---- | ---------- | ------------ | | func | values | iOS, Android | ## Working with example app ### With XCode You'll find working example in the `example` directory of this repository. You can run it by: ```sh git clone https://github.com/ibrahimsulai/react-native-circular-multiple-slider.git cd react-native-circular-multiple-slider/app/example/react_native_circular_multiple_slider_example npm install open ios/react_native_circular_multiple_slider_example.xcworkspace ``` XCode will open. Click Run button and that's it. ## Author Ibrahim Sulaiman (ibrahim.kce@icloud.com) ## License The library is released under the MIT licence. For more information see `LICENSE`. --- _Source: https://npm.io/package/react-native-circular-multiple-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._