Comments (7)
@jhonyourangel +1, I would love to use this library in web!
from react-native-circular-slider.
Me to pleeeease.
from react-native-circular-slider.
badly need this lib in react JS...
from react-native-circular-slider.
I've cloned this package and got it working in ReactJS. Just having some trouble with the "sliding" or "scrolling" of the start and end icons. It works, but does not follow the mouse quite as well as expected yet.
from react-native-circular-slider.
from react-native-circular-slider.
I'll play around some more with it today and then push the updates to git possibly tomorrow. It relates to calculating the new angle and length via the mouse X and Y. The old code does the calcs here, but I'm not quite sure what actual values moveX
and moveY
provide here. Are the relative to screen X/Y, or component X/Y etc...
onPanResponderMove: (evt, { moveX, moveY }) => {
const { circleCenterX, circleCenterY } = this.state;
const { angleLength, startAngle, onUpdate } = this.props;
const currentAngleStop = (startAngle + angleLength) % (2 * Math.PI);
let newAngle = Math.atan2(moveY - circleCenterY, moveX - circleCenterX) + Math.PI / 2;
if (newAngle < 0) {
newAngle += 2 * Math.PI;
}
let newAngleLength = currentAngleStop - newAngle;
if (newAngleLength < 0) {
newAngleLength += 2 * Math.PI;
}
onUpdate({ startAngle: newAngle, angleLength: newAngleLength % (2 * Math.PI) });
}
from react-native-circular-slider.
I've pushed a working version to https://github.com/Quentinb/react-web-circular-slider and published it on NPM https://www.npmjs.com/package/react-web-circular-slider.
Still needs a bit of work and cleanup but us currently in a functioning state.
from react-native-circular-slider.
Related Issues (20)
- Layout broken with RN 0.48 HOT 10
- Become a maintainer of this package HOT 6
- Tried to register two views with the same name RNSVGPath HOT 3
- How to Restrict BedTime Marker not to move beyond 0 ? Any Hack ?
- CircularSlider not slide on IOS HOT 16
- Some informations
- Undefined is not an object (evaluating '_react2.PropTypes.number') HOT 6
- ClockFace and circle is placed in wrong position HOT 3
- Component do not slide on Android
- I want the same for 33, 100 ,1000 instead of 360 .Do any one has any idea? HOT 1
- Ticks do not line up correctly with numbers HOT 1
- Cannot read property 'number' of undefined HOT 2
- How can I limit the travel range of an icon?
- Touch responsiveness of slider inaccurate after navigating to component using React Navigation HOT 1
- Suport for typescript HOT 4
- update needed
- Project status ?
- Unable to use in expo go HOT 2
- Cnnot read property 'number' of undefined in ClockFace HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-circular-slider.