rn-range-slider - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

package.json

 {
   "name": "rn-range-slider",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "author": "Tigran Sahakyan <[e-mail]>",
@@ -25,3 +25,3 @@ "description": "React Native Range Slider for Android and iOS",
     "type": "git",
-    "utl": "https://github.com/githuboftigran/rn-range-slider.git"
+    "url": "https://github.com/githuboftigran/rn-range-slider.git"
   },
@@ -28,0 +28,0 @@ "dependencies": {

README.md

@@ -33,3 +33,14 @@ # RangeSlider
 
-<RangeSlider style={{width: 160, height: 80}} />
+<RangeSlider
+    style={{width: 160, height: 80}}
+    gravity={'center'}
+    min={200}
+    max={1000}
+    step={20}
+    selectionColor="#3df"
+    blankColor="#f618"
+    onValueChanged={(low, high, fromUser) => {
+        this.setState({rangeLow: low, rangeHigh: high})
+    }}/>
+/>
 
@@ -41,2 +52,5 @@ ...
 
+Supported color formats are: **#RGB**, **#RGBA**, **#RRGGBB**, **#RRGGBBAA**
+
+
 | Property |      Description      | Type | Default Value |
@@ -58,16 +72,45 @@ |----------|-----------------------|------|:-------------:|
 | gravity | Vertical gravity of drawn content | String<br/><br/>Currently supported values:<br/>- **top**<br/>- **bottom**<br/>- **center** | **top** |
-| selectionColor |  Color of selected part | String<br/>(**#RRGGBB** or **#AARRGGBB**) | **#4286f4** |
-| blankColor |  Color of unselected part | String<br/>(**#RRGGBB** or **#AARRGGBB**) | **#7fffffff** |
-| thumbColor |  Color of thumb | String<br/>(**#RRGGBB** or **#AARRGGBB**) | **#ffffff** |
-| thumbBorderColor |  Color of thumb's border | String<br/>(**#RRGGBB** or **#AARRGGBB**) | **#cccccc** |
-| labelBackgroundColor |  Color label's background | String<br/>(**#RRGGBB** or **#AARRGGBB**) | **#ff60ad** |
-| labelBorderColor |  Color label's border | String<br/>(**#RRGGBB** or **#AARRGGBB**) | **#d13e85** |
-| labelTextColor |  Color label's text | String<br/>(**#RRGGBB** or **#AARRGGBB**) | **#ffffff** |
+| selectionColor |  Color of selected part | String | **#4286f4** |
+| blankColor |  Color of unselected part | String | **#ffffff7f** |
+| thumbColor |  Color of thumb | String | **#ffffff** |
+| thumbBorderColor |  Color of thumb's border | String | **#cccccc** |
+| labelBackgroundColor |  Color label's background | String | **#ff60ad** |
+| labelBorderColor |  Color label's border | String | **#d13e85** |
+| labelTextColor |  Color label's text | String | **#ffffff** |
 | min |  Minimum value of slider | Number (integer) | **0** |
 | max |  Maximum value of slider | Number (integer) | **100** |
 | step |  Step of slider | Number (integer) | **1** |
-| lowValue |  Current value of lower thumb | Number (integer) | **0** |
-| highValue |  Current value of higher thumb | Number (integer) | **100** |
+| initialLowValue |  Initial value of lower thumb | Number (integer) | **0** |
+| initialHighValue |  Initial value of higher thumb | Number (integer) | **100** |
 
+#### Methods
+
+To call methods on slider you need to have a reference to it's instance.
+React native provides 2 ways to do it.
+And after that you can call these methods on that instance.
+
+```
+...
+<RangeSlider ref="_rangeSlider" />
+...
+this.refs._rangeSlider.setLowValue(42);
+...
+```
+
+or
+
+```
+...
+<RangeSlider ref={ component => this._rangeSlider = component } />
+...
+this._rangeSlider.setLowValue(42);
+...
+```
+
+| Method |      Description      | Params |
+|----------|-----------------------|------|
+| setLowValue | Set low value of slider | value: number |
+| setHighValue | Set high value of slider | value: number |
+
 ## Known issues
 * Label's corner radius is not working on iOS

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

977605

increased by0.15%

Number of lines in readme file

114

increased by60.56%

Number of low supply chain risk alerts

0

decreased by-100%

No dependency changes