diff --git a/.eslintrc b/.eslintrc index 94c8ba3..0512143 100644 --- a/.eslintrc +++ b/.eslintrc @@ -26,6 +26,9 @@ rules: - after-props react/require-default-props: - 0 + no-param-reassign: + - error + - props: false env: es6: true browser: true diff --git a/src/js/input-range/slider.jsx b/src/js/input-range/slider.jsx index 3df937b..1754075 100644 --- a/src/js/input-range/slider.jsx +++ b/src/js/input-range/slider.jsx @@ -88,6 +88,19 @@ export default class Slider extends React.Component { return style; } + /** + * set all sibling z-index values to zero + * set current node z-index to 2 + * @private + * @return {void} + */ + setZIndex() { + this.node.parentElement.childNodes.forEach((child) => { + child.style.zIndex = '0'; + }); + this.node.style.zIndex = '2'; + } + /** * Listen to mousemove event * @private @@ -176,6 +189,7 @@ export default class Slider extends React.Component { */ @autobind handleMouseUp() { + this.setZIndex(this.node); this.removeDocumentMouseMoveListener(); this.removeDocumentMouseUpListener(); } @@ -216,6 +230,7 @@ export default class Slider extends React.Component { */ @autobind handleTouchEnd() { + this.setZIndex(this.node); this.removeDocumentTouchMoveListener(); this.removeDocumentTouchEndListener(); } @@ -227,6 +242,7 @@ export default class Slider extends React.Component { */ @autobind handleKeyDown(event) { + this.setZIndex(this.node); this.props.onSliderKeyDown(event, this.props.type); } @@ -236,7 +252,6 @@ export default class Slider extends React.Component { */ render() { const style = this.getStyle(); - return (