Comments (6)
Hey, can you provide the full example?
from react-range.
`
import { Range } from 'react-range';
<Range
step={0.1}
min={0}
max={100}
values={[10, 14]}
renderTrack={({ children }) => (
<div
style={{
height: '6px',
width: '100%',
backgroundColor: '#ccc'
}}
>
{children}
)}
renderThumb={() => (
<div
style={{
height: '42px',
width: '42px',
backgroundColor: '#999'
}}
/>
)}
/>`
from react-range.
You need to spread over some props over your divs. They are being passed through in renderTrack / renderThumb. Check the examples.
from react-range.
I am experiencing the same error:
Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
at Range._this.getOffsets (Range.js:42)
at Range._this.onResize (Range.js:134)
at utils.js:131
happens when native
prop gets changed.
from react-range.
happens when native prop gets changed.
What is native prop? Can you please provide a full example?
from react-range.
Actually this is a little bit awkward... I confused 2 libraries: react-range
and react-custom-scrollbars. 🤭
Nonetheless react-custom-scrollbars
seems to break react-range
under some circumstances... Unfortunately, I didn't manage to create a small reproducible repo but I figured out this happens when changing native
prop in react-custom-scrollbars
which I guess ends up unmounting all the children and them mounts them again. This seems to cause react-range
to lose ref (trackRef
) and throw this error on first render (?) after unmount/mount.
_this.getOffsets = function () {
var _a = _this.props, direction = _a.direction, values = _a.values, min = _a.min, max = _a.max;
var trackElement = _this.trackRef.current;
var trackRect = trackElement.getBoundingClientRect(); <-------------------
var trackPadding = utils_1.getPaddingAndBorder(trackElement);
I am not familiar at all with react-range
but does my theory make sense? If you want I could privately send you a link to my app with source maps enabled so you could debug it further.
Just checked and it's a call to getOffsets
from onResize
that's causing this.
from react-range.
Related Issues (20)
- Old React syntax HOT 1
- How to disable specific thumb in multi-range slider? HOT 1
- Crashes when max size is set to over 10million and step size is 1. HOT 1
- 'Range' cannot be used as a JSX component. Its instance type 'Range' is not a valid JSX element. HOT 6
- Focus ring around the thumb is visible on mouse drag HOT 3
- Issue when the state values is updated with more number of values.
- Uncaught TypeError: Property 'handleEvent' is not callable. Range.js HOT 1
- Passing disabled props into renderThumb
- ChainAlert: npm package release (1.8.13) has no matching tag in this repo
- Slider jumps back to the start position in iOS Safari HOT 1
- React complaining on missing unike key in array of element HOT 1
- Marks do not correctly re-render on state change HOT 2
- Uncaught TypeError: Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element'. HOT 1
- Incorrect draggedTrackPos X coordinate value during DnD Track
- onChange can't prevent event bubbling
- Throwing errors vs console.warn
- A props object containing a "key" prop is being spread into JSX: HOT 3
- node 18 support
- First onChange in a slider greater than the viewport not registering correctly HOT 1
- Query: No overlap but allow neighbouring handles to be pushed around
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-range.