feat: expose new props and add a playground

src/Slider/Slider.js

@@ -23,6 +23,10 @@ type Props = {|
   +snapped?: boolean,
   +step?: number,
   +customMarker?: React.Node,
+  +sliderLength?: number,
+  +onValuesChange?: () => void,
+  +onValuesChangeFinish?: (Array<number>) => void,
+  +onValuesChangeStart?: () => void,
 |};
 
 type OnLayout = {
@@ -60,15 +64,19 @@ export default class Slider extends React.Component<Props, State> {
   }
 
   sliderOneValuesChange = (values: Array<number>) => {
+    const { onValuesChange } = this.props;
     this.setState({
       singleSliderValue: values,
     });
+    onValuesChange && onValuesChange();
   };
 
   multiSliderValuesChange = (values: Array<number>) => {
+    const { onValuesChange } = this.props;
     this.setState({
       multiSliderValues: values,
     });
+    onValuesChange && onValuesChange();
   };
 
   calculateOffset = (value: number) => {
@@ -112,7 +120,10 @@ export default class Slider extends React.Component<Props, State> {
   };
 
   onLayout = ({ nativeEvent }: OnLayout) => {
-    this.setState({ width: nativeEvent.layout.width });
+    const { sliderLength } = this.props;
+    this.setState({
+      width: sliderLength || nativeEvent.layout.width,
+    });
   };
 
   render() {
@@ -124,6 +135,8 @@ export default class Slider extends React.Component<Props, State> {
       step = 1,
       type,
       customMarker,
+      onValuesChangeFinish,
+      onValuesChangeStart,
     } = this.props;
     const { multiSliderValues, width, singleSliderValue } = this.state;
 
@@ -194,6 +207,8 @@ export default class Slider extends React.Component<Props, State> {
                   unselectedStyle={styles.unselected}
                   customMarker={customMarker || Marker}
                   snapped={snapped}
+                  onValuesChangeFinish={onValuesChangeFinish}
+                  onValuesChangeStart={onValuesChangeStart}
                 />
               </View>
             </View>

src/Slider/Slider.stories.js

@@ -3,12 +3,47 @@
 import React from 'react';
 import { ScrollView } from 'react-native';
 import { storiesOf } from '@storybook/react-native';
-import { withKnobs } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import {
+  number,
+  text,
+  select,
+  boolean,
+  withKnobs,
+} from '@storybook/addon-knobs';
 
 import { Slider } from '.';
 
 storiesOf('Slider', module)
   .addDecorator(withKnobs)
+  .add('Playground', () => {
+    const minValue = number('Min value', 0);
+    const maxValue = number('Max value', 10000);
+    const startValue = number('Start value', 2000);
+    const endValue = number('End value', 8000);
+    const label = text('Label', 'Price');
+    const type = select('Type', ['multi', 'single'], 'single');
+    const snapped = boolean('Snapped', false);
+    const numOfParts = number('Number of parts', 5);
+    const sliderLength = number('Slider length', 315);
+
+    return (
+      <Slider
+        minValue={minValue}
+        maxValue={maxValue}
+        startValue={startValue}
+        endValue={endValue}
+        label={label}
+        type={type}
+        snapped={snapped}
+        numOfParts={numOfParts}
+        sliderLength={sliderLength}
+        onValuesChange={action('change')}
+        onValuesChangeFinish={action('finish')}
+        onValuesChangeStart={action('start')}
+      />
+    );
+  })
   .add('Default', () => (
     <ScrollView style={{ flex: 1 }}>
       <Slider
@@ -18,7 +53,7 @@ storiesOf('Slider', module)
         endValue={1}
         label="Max stops"
         type="multi"
-        snapped={false}
+        snapped
         numOfParts={5}
       />
       <Slider
@@ -31,17 +66,6 @@ storiesOf('Slider', module)
         snapped={false}
         numOfParts={10}
       />
-      <Slider
-        minValue={0}
-        maxValue={100}
-        startValue={0}
-        endValue={10}
-        label="Max stops"
-        type="multi"
-        snapped
-        step={10}
-        numOfParts={4}
-      />
       <Slider
         minValue={10000}
         maxValue={30000}

yarn.lock

@@ -9997,7 +9997,7 @@ react-native-modal@^5.4.0:
 
 "react-native-multi-slider@https://github.com/lukewalczak/react-native-multi-slider.git#feat/block-overlap":
   version "2.0.0"
-  resolved "https://github.com/lukewalczak/react-native-multi-slider.git#ed4746c444a89322cea2f837e04ce8080e953b84"
+  resolved "https://github.com/lukewalczak/react-native-multi-slider.git#920046a4a6ab49f7f163d0e00ae34993b9778807"
 
 react-native-status-bar-height@^2.2.0:
   version "2.2.0"