Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-native-slider-picker
Advanced tools
react-native-slider-picker - npm Package Compare versions
Comparing version 1.0.30 to 1.0.31
| { | ||
| "name": "react-native-slider-picker", | ||
| "version": "1.0.30", | ||
| "version": "1.0.31", | ||
| "description": "Custom range slide picker for React Native. 🚧 UNDER CONSTRUCTION 🚧", | ||
@@ -5,0 +5,0 @@ "main": "src/index.js", |
| ## React Native Slider Picker | ||
| React Native input component to select a single value from a range of 0 to a custom maximum. | ||
| ### 🚧 🚧 This package is currently under construction 🚧 🚧 | ||
| ## Installation | ||
| `npm install react-native-slider-picker` | ||
| ## Required dependencies | ||
| React Native Slider Picker relies on [react-native-css-vh-vw](https://github.com/graftonstudio/react-native-css-vh-vw) for height and width dimensions. | ||
| `npm install react-native-css-vh-vw` | ||
| ## Usage | ||
| | Name | Type | Description | Default | Notes | | ||
| |----------------------------|----------|-----------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------| | ||
| | buttonBackgroundColor | String | Sets background color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | `"white"` | | | ||
| | buttonBorderColor | String | Sets border color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | `"dimgrey"` | | | ||
| | buttonBorderWidth | Number | Sets border width of Slider's button. | `1` | | | ||
| | buttonDimensionsPercentage | Number | Sets height and width of Slider's button as percentage of viewport width. | `1` | | | ||
| | callback | Function | Called on change. | '() => {}' | | | ||
| | defaultValue | Number | Default value for slider on load. | `5` | If valued passed is greater than maxValue, the value will be set to that of maxValue. | | ||
| | fillColor | String | Sets fill color of inner slider. | `"dodgerblue"` | Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | | ||
| | heightPercentage | Number | Percentage of device's viewport to set as component's height. | `1` | Value passed to `vh()` | | ||
| | labelFontColor | String | Sets font color of labels if they are displayed. | `"dimgrey"` | Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | | ||
| | labelFontWeight | String | Sets font weight of labels if they are displayed. | `""` -> the default `fontWeight` value in React Native. | | | ||
| | maxLabel | String | Label for the maximum value. | Empty `<View>` component. | Empty `<View>` has a `flex : 1` value. | | ||
| | maxValue | Number | The maximum value/high end of range for the Slider. | `10` | | | ||
| | midLabel | String | Label for the medium value. | Empty `<View>` component. | Empty `<View>` has a `flex : 1` value. | | ||
| | minLabel | String | Label for the minimum value. | Empty `<View>` component. | Empty `<View>` has a `flex: 1` value. | | ||
| | scaleNumberFontColor | String | Sets font color of scale numbers if they are displayed. | `"dimgrey"` | Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | | ||
| | scaleNumberFontWeight | String | Sets font weight of scale numbers if they are displayed. | `""` -> the default `fontWeight` value in React Native. | | | ||
| | showFill | Boolean | Boolean value to determine whether or not the slider inner shows a fill or if it is transparent. | `true` | | | ||
| | showNumberScale | Boolean | Boolean value to determine whether or not to display scale of numbers for the Slider's range. | `false` | | | ||
| | showSeparatorScale | Boolean | Boolean value to determine whether or not to display lines dividing the slider into different sections. | `false` | | | ||
| | sliderInnerBackgroundColor | String | Sets background color of inner slider View. | `"white"` | Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. | | ||
| | sliderInnerBorderStyles | Object | An object of StyleSheet properties to set border-related styles of sliderInner View component. | `{ borderWidth: vw(1) / 2, borderColor: '#d9dce4', borderBottomColor: '#f1f4f5', borderRadius: 50 }` | If passed, the object is filtered to remove any key/value properties that are not for component's border. | | ||
| | widthPercentage | Number | Percentage of device's viewport to set as component's width. | `85` | Value passed to `vw()` | |
@@ -6,21 +6,24 @@ /** | ||
| * @description Generic pre-styled slide picker input. | ||
| * @param {String} buttonBackgroundColor - Optional. Sets background color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to "gray". | ||
| * @param {String} buttonBorderColor - Optional. Sets border color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to "gray". | ||
| * @param {String} buttonBackgroundColor - Optional. Sets background color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to `"white"`. | ||
| * @param {String} buttonBorderColor - Optional. Sets border color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to `"dimgrey"`. | ||
| * @param {Number} buttonBorderWidth - Optional. Sets border width of Slider's button. Defaults to `1`. | ||
| * @param {Number} buttonDimensionsPercentage - Optional. Sets height and width of Slider's button as percentage of viewport width. Defaults to `1`. | ||
| * @param {Function} callback - Optional. Called on change. Defaults to '() => {}'. | ||
| * @param {Number} defaultValue - Optional. Default value. Defaults to `5`. | ||
| * @param {String} fillColor - Optional. Sets fill color of inner slider. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to "#feb53f". | ||
| * @param {Number} height - Optional. Percentage of device's viewport to set as component's height. TO DO: Set minimum and maximum | ||
| * @param {String} labelFontColor - Optional. Sets font color of labels if they are displayed. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to "gray". | ||
| * @param {String} labelFontWeight - Optional. Sets font weight of labels if they are displayed. | ||
| * @param {String} maxLabel - Optional. Label for the maximum value. | ||
| * @param {Number} defaultValue - Optional. Default value. Defaults to `5`. If valued passed is greater than maxValue, the value will be set to that of maxValue. | ||
| * @param {String} fillColor - Optional. Sets fill color of inner slider. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to `"dodgerblue"`. | ||
| * @param {Number} heightPercentage - Optional. Percentage of device's viewport to set as component's height. Defaults to `1`. | ||
| * @param {String} labelFontColor - Optional. Sets font color of labels if they are displayed. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to `"dimgrey"`. | ||
| * @param {String} labelFontWeight - Optional. Sets font weight of labels if they are displayed. Defaults to empty string - the default fontWeight value in React Native. | ||
| * @param {String} maxLabel - Optional. Label for the maximum value. Defaults to an empty `<View>` component. | ||
| * @param {Number} maxValue - Optional. The maximum value/high end of range for the Slider. Defaults to `10`. | ||
| * @param {String} midLabel - Optional. Label for the medium value. | ||
| * @param {String} minLabel - Optional. Label for the minimum value. | ||
| * @param {String} scaleNumberFontColor - Optional. Sets font color of scale numbers if they are displayed. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to "#6c7682". | ||
| * @param {String} scaleNumberFontWeight - Optional. Sets font weight of scale numbers if they are displayed. | ||
| * @param {String} midLabel - Optional. Label for the medium value. Defaults to an empty `<View>` component. | ||
| * @param {String} minLabel - Optional. Label for the minimum value. Defaults to an empty `<View>` component. | ||
| * @param {String} scaleNumberFontColor - Optional. Sets font color of scale numbers if they are displayed. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to "dimgrey". | ||
| * @param {String} scaleNumberFontWeight - Optional. Sets font weight of scale numbers if they are displayed. Defaults to empty string - the default fontWeight value in React Native. | ||
| * @param {Boolean} showFill - Optional. Boolean value to determine whether or not the slider inner shows a fill or if it is transparent. Defaults to `true`. | ||
| * @param {Boolean} showNumberScale - Optional. Boolean value to determine whether or not to display scale of numbers for the Slider's range. Defaults to `false`. | ||
| * @param {String} sliderInnerBackgroundColor - Optional. Sets background color of inner slider View. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to "white". | ||
| * @param {Boolean} showSeparatorScale - Optional. Boolean value to determine whether or not to display lines dividing the slider into different sections. Defaults to `false`. If maxValue is greater than 10 or widtherPercentage is greater than or equal to 50, will be forced to false. | ||
| * @param {String} sliderInnerBackgroundColor - Optional. Sets background color of inner slider View. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to `"white"`. | ||
| * @param {Object} sliderInnerBorderStyles - Optional. An object of StyleSheet properties to set border-related styles of sliderInner View component. If passed, the object is filtered to remove any key/value properties that aren't for component's border. Defaults to {}. | ||
| * @param {Number} width - Optional. Percentage of device's viewport to set as component's width. TO DO: Set minimum and maximum | ||
| * @param {Number} widthPercentage - Optional. Percentage of device's viewport to set as component's width. | ||
| */ | ||
@@ -84,2 +87,3 @@ | ||
| this.scaleNumberFontColor = this.props.scaleNumberFontColor ? this.props.scaleNumberFontColor : 'dimgrey'; | ||
| this.scaleNumberFontWeight = this.props.scaleNumberFontWeight ? this.props.scaleNumberFontWeight : ''; | ||
| this.showFill = this.props.showFill === false ? false : true; | ||
@@ -86,0 +90,0 @@ this.showNumberScale = this.props.showNumberScale ? this.props.showNumberScale : false; |
@@ -6,4 +6,4 @@ /** | ||
| * @description Generic pre-styled slide picker cursor. Animated component that can be dragged within it's parent. | ||
| * @param {String} buttonBackgroundColor - Optional. Sets background color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to "gray". | ||
| * @param {String} buttonBorderColor - Optional. Sets border color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to "gray". | ||
| * @param {String} buttonBackgroundColor - Optional. Sets background color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to `"white"`. | ||
| * @param {String} buttonBorderColor - Optional. Sets border color of Slider's button. Can pass valid React Native color keywords, hexidecimal, rgb(), or rgba() values. Defaults to `"dimgrey"`. | ||
| * @param {Number} maxOffset - Optional. X-axis coordinates of right-edge of <StyledSliderPicker>. Component cannot be draggeed right past this point. | ||
@@ -32,4 +32,4 @@ * @param {Number} defaultValue - Optional. Default value the cursor will be placed in <StyledSliderPicker> on. | ||
| // Props checking | ||
| this.buttonBackgroundColor = this.props.buttonBackgroundColor ? this.props.buttonBackgroundColor : 'black'; | ||
| this.buttonBorderColor = this.props.buttonBorderColor ? this.props.buttonBorderColor : 'black'; | ||
| this.buttonBackgroundColor = this.props.buttonBackgroundColor ? this.props.buttonBackgroundColor : 'white'; | ||
| this.buttonBorderColor = this.props.buttonBorderColor ? this.props.buttonBorderColor : 'dimgrey'; | ||
| this.buttonBorderWidth = this.props.buttonBorderWidth ? this.props.buttonBorderWidth : 1; | ||
@@ -36,0 +36,0 @@ this.buttonDimensionsPercentage = this.props.buttonDimensionsPercentage ? this.props.buttonDimensionsPercentage : 6; |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by30.36%
45025
- Lines of code
- increased by0.56%
721
- Number of lines in readme file
- increased by950%
42
No dependency changes