Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@jesster2k10/react-native-range-slider
Advanced tools
Readme
A high-quality, cross platform, native iOS range slider for react native. A slider, similar in style to UISlider, but which allows you to pick a minimum and maximum range; inspired by react-native-range-slider
Install the library using either yarn or npm like so:
yarn add @jesster2k10/react-native-range-slider
npm install --save @jesster2k10/react-native-range-slider
If you're using React Native versions > 60.0, it's relatively straightforward.
cd ios && pod install
For versions below 0.60.0, use rnpm links
react-native link @jesster2k10/react-native-range-slider
For versions below 0.60.0, follow the linking instructions above. There are additional steps required to get started with android.
Modify your settings.gradle to include the following
include ':rangeseekbar'
project(':rangeseekbar').projectDir = new File('../../node_modules/@jesster2k10/react-native-range-seekbar/crystalrangeseekbar')
Modify and your application build.gradle
to include:
buildscript {
dependencies {
classpath 'com.github.dcendents:android-maven-gradle-plugin:1.5'
classpath 'com.jfrog.bintray.gradle:gradle-bintray-plugin:1.7.3'
}
}
### Step Three
Modify your AndroidManifest.xml
and set android:allowBackup="true"
, see below for example:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.ReactNativeRangeSliderExample">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="true"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>
You can check out the examples for more usage.
import RangeSlider from '@jesster2k10/react-native-range-slider';
// ...
<RangeSlider
min={0}
max={100}
onChange={(min, max) => console.log(min, max)}
/>;
## Props
property | type | description | required |
---|---|---|---|
min | number | the minimum value for the slider | TRUE |
max | number | the maximum value for the slider | TRUE |
onChange | (min: number, max: number) => void | a callback that will be called with slider data once the values change | FALSE |
tintColor | string | tint color for the slider track & handles (ios only, use handleColor on android) | FALSE |
tintColorBetweenHandles | string | tint color for the active part of the slider track | FALSE |
step | number | the step for the slider | FALSE |
handleColor | string | the color for both left and right handlers | FALSE |
style | object | a custom style object for the slider | FALSE |
prefix | string | the prefix for the min and max values | |
suffix | string | the suffix for the min and max values |
property | type | description | required |
---|---|---|---|
type | slider | range | the type of slider |
selectedMaximum | number | the selected maximum value, it shouldn't be less than max | FALSE |
selectedMinimum | number | the selected minimum value, it shouldn't be less than min | FALSE |
handleBorderColor | string | the color for the slider handle border | FALSE |
handleWidth | number | the size of the handle | FALSE |
minLabelColor | string | the color of the minimum (left hand) label | FALSE |
maxLabelColor | string | the color of the maximum (right hand) label | FALSE |
handleDiameter | number | the diameter of the handle | FALSE |
lineHeight | number | the height of the slider track | FALSE |
hideLabels | boolean | controls whether the min and max labels are visible | FALSE |
minLabelFont | string | the font family name of the min (left hand) label | FALSE |
minLabelFontSize | number | the font size of the min (left hand) label | FALSE |
maxLabelFont | string | the font family name of the max (right hand) label | FALSE |
maxLabelFontSize | number | the font size of the max (right hand) label | FALSE |
labelPadding | number | extra padding for the min & max labels | FALSE |
maxDistance | number | the maximum distance between handles | FALSE |
minDistance | number | the minimum distance between handles | FALSE |
lineBorderWidth | number | the border width of the slider track | FALSE |
lineBorderColor | string | the border color of the slider track | FALSE |
property | type | description | required |
---|---|---|---|
leftHandleColor | string | the color of the left handle | FALSE |
leftHandlePressedColor | string | the color of the left (min) handle when touched | FALSE |
rightHandleColor | string | the color of the right (max) handle | FALSE |
rightHandlePressedColor | string | the color of the right (max) handle when touched | FALSE |
handlePressedColor | string | the color of the handle when touched | FALSE |
minStartValue | number | - | FALSE |
maxStartValue | number | - | FALSE |
fixGap | number | a fixed gap between the handles | FALSE |
corderRadius | number | the corder radius of the slider track | FALSE |
Please visit the CONTRIBUTING.md file.
MIT
FAQs
React native cross platform range slider
The npm package @jesster2k10/react-native-range-slider receives a total of 377 weekly downloads. As such, @jesster2k10/react-native-range-slider popularity was classified as not popular.
We found that @jesster2k10/react-native-range-slider demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.