
Product
Introducing Scala and Kotlin Support in Socket
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
@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
The npm package @jesster2k10/react-native-range-slider receives a total of 0 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.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.