bartgryszko / React Native Circular Slider
Licence: mit
React Native component for creating circular slider π
Stars: β 716
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Circular Slider
Hgcircularslider
A custom reusable circular / progress slider control for iOS application.
Stars: β 2,240 (+212.85%)
Mutual labels: slider, clock
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: β 29,519 (+4022.77%)
Mutual labels: slider
Slideview
An awesome sliding button library for Android.
Stars: β 683 (-4.61%)
Mutual labels: slider
Svg Workshop
Materials for SVG Essentials & Animation Course
Stars: β 612 (-14.53%)
Mutual labels: svg
React Zmage
δΈδΈͺεΊδΊ React ηε―ηΌ©ζΎεΎηζ§δ»Ά | A scalable image wrapper power by react
Stars: β 713 (-0.42%)
Mutual labels: slider
Payment Icons
π³ Payment / Ecommerce related svg icon packs
Stars: β 671 (-6.28%)
Mutual labels: svg
Macaw
Powerful and easy-to-use vector graphics Swift library with SVG support
Stars: β 5,756 (+703.91%)
Mutual labels: svg
Alphatab
alphaTab is a cross platform music notation and guitar tablature rendering library.
Stars: β 647 (-9.64%)
Mutual labels: svg
Itext7 Dotnet
iText 7 for .NET is the .NET version of the iText 7 library, formerly known as iTextSharp, which it replaces. iText 7 represents the next level of SDKs for developers that want to take advantage of the benefits PDF can bring. Equipped with a better document engine, high and low-level programming capabilities and the ability to create, edit and enhance PDF documents, iText 7 can be a boon to nearly every workflow.
Stars: β 698 (-2.51%)
Mutual labels: svg
React Slider
Accessible, CSS agnostic, slider component for React.
Stars: β 627 (-12.43%)
Mutual labels: slider
Glide
A dependency-free JavaScript ES6 slider and carousel. Itβs lightweight, flexible and fast. Designed to slide. No less, no more
Stars: β 6,256 (+773.74%)
Mutual labels: slider
react-native-circular-slider π
React Native component for creating circular slider.
Example app β inspired by Apple's Bedtime β°
(It's just an example what you can achieve β with this package you can create any circular slider)
Installation
-
Install library and react-native-svg
npm i --save react-native-circular-slider react-native-svg
-
Link native code for SVG
react-native link react-native-svg
Usage
Import Circular Slider
import CircularSlider from 'react-native-circular-slider';
Use as follows:
<CircularSlider
startAngle={this.state.startAngle}
angleLength={this.state.angleLength}
onUpdate={({ startAngle, angleLength }) => this.setState({ startAngle, angleLength })}
segments={5}
strokeWidth={40}
radius={145}
gradientColorFrom="#ff9800"
gradientColorTo="#ffcf00"
showClockFace
clockFaceColor="#9d9d9d"
bgCircleColor="#171717"
stopIcon={<G><Path .../></G>}
startIcon={<G><Path .../></G>}
/>
Configuration
You can configure the passing by following props:
- startAngle β angle where the slider starts (from 0 to 2Ο)
- angleLength - length of the slider (from 0 to 2Ο)
- onUpdate({ startAngle, angleLength }) - when slider is moved, onUpdate(data) is triggered, where data is an object of new values of startAngle and angleLength.
- segments (optional) - SVG doesn't support canonical gradients, so it's imitated by using multiple linear gradients across the slider. In most cases 5 should be fine.
- strokeWidth (optional) - width of slider
- radius (optional) - size of the slider
- gradientColorFrom (optional) - initial gradient color
- gradientColorTo (optional) - final gradient color
- showClockFace (optional) - if component should render clock face
- bgCircleColor (optional) - color of the circle under the slider (pathway for a slider)
- stopIcon (optional) - SVG Path for a stop icon (see the example)
- startIcon (optional) - SVG Path for a start icon (see the example)
Working example app
With XCode
You'll find working example in the example
directory of this repository. You can run it by:
git clone https://github.com/bgryszko/react-native-circular-slider.git
cd react-native-circular-slider/example/Bedtime
npm install
open ios/Bedtime.xcodeproj
XCode will open. Click Run button and that's it.
With Exponent
The easiest way to run it is with Exponent: https://getexponent.com/@community/bedtime
If you'd rather build it locally, follow these steps:
- Download XDE
- Clone the repo and install dependencies
git clone https://github.com/bgryszko/react-native-circular-slider.git
cd react-native-circular-slider/example-exponent/Bedtime
npm install
- Open the project with XDE
Author
Bartosz Gryszko ([email protected])
For new components and updates follow me on twitter.
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].