
Security News
npm ‘is’ Package Hijacked in Expanding Supply Chain Attack
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
@jesster2k10/react-native-range-slider
Advanced tools
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
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
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
Security News
A critical flaw in the popular npm form-data package could allow HTTP parameter pollution, affecting millions of projects until patched versions are adopted.
Security News
Bun 1.2.19 introduces isolated installs for smoother monorepo workflows, along with performance boosts, new tooling, and key compatibility fixes.