Feat/enable expressing overlap distance in step

MultiSlider.js

@@ -46,11 +46,16 @@ export default class MultiSlider extends React.Component {
     snapped: false,
     vertical: false,
     minMarkerOverlapDistance: 0,
+    minMarkerOverlapStepDistance: 0,
   };
 
   constructor(props) {
     super(props);
 
+    if(this.props.minMarkerOverlapDistance > 0 && this.props.minMarkerOverlapStepDistance > 0) {
+      console.error('You should provide either "minMarkerOverlapDistance" or "minMarkerOverlapStepDistance", not both. Expect unreliable results.');
+    }
+
     this.optionsArray =
       this.props.optionsArray ||
       createArray(this.props.min, this.props.max, this.props.step);
@@ -161,7 +166,7 @@ export default class MultiSlider extends React.Component {
         ? 0
         : this.props.minMarkerOverlapDistance > 0
         ? this.props.minMarkerOverlapDistance
-        : this.stepLength);
+        : (this.props.minMarkerOverlapStepDistance || 1) * this.stepLength);
     var top =
       trueTop === 0
         ? 0
@@ -233,7 +238,7 @@ export default class MultiSlider extends React.Component {
         ? 0
         : this.props.minMarkerOverlapDistance > 0
         ? this.props.minMarkerOverlapDistance
-        : this.stepLength);
+        : (this.props.minMarkerOverlapStepDistance || 1) * this.stepLength);
     var top = this.props.sliderLength - this.props.markerSize / 2;
     var confined =
       unconfined < bottom ? bottom : unconfined > top ? top : unconfined;

README.md

@@ -99,5 +99,6 @@ Feel free to contribute to this part of the documentation.
 | markerOffsetX | 0 | number | Offset the cursor(s) on the X axis |
 | markerOffsetY | 0 | number | Offset the cursor(s) on the Y axis |
 | markerSize | 0 | number | It determines the marker margin from the edges of the track, useful to avoid the markers to overflow out of the track. |
-| minMarkerOverlapDistance | 0 | number | if this is > 0 and allowOverlap is false, this value will determine the closest two markers can come to each other (in pixels, not steps). This can be used for cases where you have two markers large cursors and you don't want them to overlap. Note that markers will still overlap at the start if starting values are too near. |
+| minMarkerOverlapDistance | 0 | number | if this is > 0 and allowOverlap is false, this value will determine the closest two markers can come to each other (in pixels, not steps). This can be used for cases where you have two markers large cursors and you don't want them to overlap. Note that markers will still overlap at the start if starting values are too near. CANNOT be combined with minMarkerOverlapDistance |
+| minMarkerOverlapStepDistance | 0 | number | if this is > 0 and allowOverlap is false, this value will determine the closest two markers can come to each other (in steps, not pixels). This can be used for cases where you have two markers large cursors and you don't want them to overlap. Note that markers will still overlap at the start if starting values are too near. CANNOT be combined with minMarkerOverlapStepDistance |
 | imageBackgroundSource | undefined | string | Specifies the source as required by [ImageBackground](https://facebook.github.io/react-native/docs/imagebackground)|

index.d.ts

@@ -74,6 +74,7 @@ export interface MultiSliderProps {
     markerOffsetX?: number;
     markerOffsetY?: number;
     minMarkerOverlapDistance?: number;
+    minMarkerOverlapStepDistance?: number;
     imageBackgroundSource?: string;
     enableLabel?: boolean;
     vertical?: boolean;