react-native-slider-picker - npm Package Compare versions

Comparing version 1.0.35 to 1.0.36

package.json

 {
   "name": "react-native-slider-picker",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "description": "Custom range slide picker for React Native. 🚧 UNDER CONSTRUCTION 🚧",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -57,2 +57,53 @@ ## React Native Slider Picker
 
+**Usage with scale**
+
+```javascript
+import { SliderPicker } from 'react-native-slider-picker';
+
+export class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { value: 5 };
+  }
+  
+  render() {
+    return (
+      <View style={styles.container}>
+
+        <Generics.SliderPicker 
+          minLabel={'min'}
+          midLabel={'mid'}
+          maxLabel={'max'}
+          maxValue={10}
+          callback={position => {
+            this.setState({ value: position });
+          }}
+          defaultValue={this.state.value}
+          labelFontColor={"#6c7682"}
+          labelFontWeight={'600'}
+          showFill={true}
+          fillColor={'green'}
+          labelFontWeight={'bold'}
+          showNumberScale={true}
+          showSeparatorScale={true}
+          buttonBackgroundColor={'#fff'}
+          buttonBorderColor={"#6c7682"}
+          buttonBorderWidth={1}
+          scaleNumberFontWeight={'300'}
+          buttonDimensionsPercentage={6}
+          heightPercentage={1}
+          widthPercentage={80}
+        />
+        
+        <Text>state.value: {this.state.value}</Text>
+      </View>
+    );
+  }
+}
+```
+
+**Output:**   
+![react-native-slider-picker With Scale](https://res.cloudinary.com/munsch-creative/image/upload/v1586994346/react-native-slider-picker-scale_kyaxnq.png "react-native-slider-picker With Scale")
+
 **Usage with many props:**
@@ -62,26 +113,46 @@ ```javascript
 
-<SliderPicker 
-  minLabel={'Min'}
-  midLabel={'Mid'}
-  maxLabel={'Max'}
-  maxValue={100}
-  defaultValue={25}
-  labelFontColor={"#6c7682"}
-  labelFontWeight={'600'}
-  showFill={true}
-  fillColor={'red'}
-  labelFontWeight={'bold'}
-  showNumberScale={true}
-  showSeparatorScale={true}
-  buttonBackgroundColor={'#fff'}
-  buttonBorderColor={"#6c7682"}
-  buttonBorderWidth={1}
-  scaleNumberFontWeight={'300'}
-  buttonDimensionsPercentage={6}
-  heightPercentage={1}
-  widthPercentage={80}
-/>
+export class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { value: 25 };
+  }
+  
+  render() {
+    return (
+      <View style={styles.container}>
+
+        <Generics.SliderPicker 
+          minLabel={'0'}
+          midLabel={'50'}
+          maxLabel={'100'}
+          maxValue={100}
+          callback={position => {
+            this.setState({ value: position });
+          }}
+          defaultValue={this.state.value}
+          labelFontColor={"#6c7682"}
+          labelFontWeight={'600'}
+          showFill={true}
+          fillColor={'red'}
+          labelFontWeight={'bold'}
+          showNumberScale={true}
+          showSeparatorScale={true}
+          buttonBackgroundColor={'#fff'}
+          buttonBorderColor={"#6c7682"}
+          buttonBorderWidth={1}
+          scaleNumberFontWeight={'300'}
+          buttonDimensionsPercentage={6}
+          heightPercentage={1}
+          widthPercentage={80}
+        />
+        
+        <Text>state.value: {this.state.value}</Text>
+      </View>
+    );
+  }
+}
 ```
 
 **Output:**   
-![react-native-slider-picker With Many Props](https://res.cloudinary.com/munsch-creative/image/upload/v1586991632/react-native-slider-picker-props_ag4lbz.png "react-native-slider-picker With Many Props")
+![react-native-slider-picker With Many Props](https://res.cloudinary.com/munsch-creative/image/upload/v1586993806/react-native-slider-picker-props_kefzxo.png "react-native-slider-picker With Many Props")

No alert changes

Improved metrics

Total package byte prevSize

48600

increased by4.12%

Number of lines in readme file

156

increased by83.53%

No dependency changes