fix: set position absolute for marks at render

Fixes #203
zillow · Jan 22, 2021 · 7d979e7 · 7d979e7
1 parent 5cd9b92
commit 7d979e7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/components/ReactSlider/ReactSlider.jsx b/src/components/ReactSlider/ReactSlider.jsx
@@ -964,6 +964,13 @@ class ReactSlider extends React.Component {
         return obj;
     }
 
+    buildMarkStyle(offset) {
+        return {
+            position: 'absolute',
+            [this.posMinKey()]: offset,
+        };
+    }
+
     renderThumb = (style, i) => {
         const className = `${this.props.thumbClassName} ${this.props.thumbClassName}-${i} ${
             this.state.index === i ? this.props.thumbActiveClassName : ''
@@ -1071,13 +1078,9 @@ class ReactSlider extends React.Component {
                 const props = {
                     key: mark,
                     className: this.props.markClassName,
+                    style: this.buildMarkStyle(offset),
                 };
 
-                props.style =
-                    this.props.orientation === 'vertical'
-                        ? { [this.props.invert ? 'bottom' : 'top']: offset }
-                        : { [this.props.invert ? 'right' : 'left']: offset };
-
                 return this.props.renderMark(props);
             });
     }

diff --git a/src/styleguidist/ThemeWrapper.jsx b/src/styleguidist/ThemeWrapper.jsx
@@ -44,7 +44,6 @@ const GlobalStyle = createGlobalStyle`
     }
 
     .example-mark {
-        position: absolute;
         width: 8px;
         height: 8px;
         border: 2px solid #000;