Custom Scale Slider in React Native
There might be scenarios wherein you will need something extra than what react native currently offers and you may need to reuse some of the existing components and add it some custom implementation to meet your needs while developing your apps. Creating such custom implementations is simple in React Native.
Topics Covered:
- State in React Native
- Reusable Component in React Native
We will use a library which supports multi slider for react native : https://github.com/ptomasroos/react-native-multi-slider
This Library supports both single and multi slider and which we will be using to create our own custom component.
Step 1: Installing and Using Slider Library
npm install — save @ptomasroos/react-native-multi-slider
You can view the library documentation for use of its use. Some of the properties are as follows:
- min: start for the slider
- max: end for the slider
- step: Increment interval
- snapped: slide at specific intervals only
For Custom Visualisation we will be using the below props:
- trackStyle: full track line color for slider
- selectedStyle: selected track line color for slider
- customMarker: Our own marker for the slider
Step 2: Creating a Scale Item Component
Our design has a scale over a slider component which means we need to build a custom scale component which will wrap the slider component in it.
Item Component is a simple component with a number and a vertical Line below it. The vertical line will be visible only if the number lies in the selected range.
Item Components receives 3 props
- value: Its header number
- first: First selected number
- second: Second selected number
Using the first & second props we will determine if the current number(value) is the selected range. If yes we will style it different to denote it as selected.
Creating our CustomSlider Component
Rendering the Item Component to display a scale
We have looped over the min and max elements to display Scale Items over the slider.
Step 3: Making it a generic for single slider
We also want our slider to support single slider. We will enable this by passing a single element in an array to value props to the library slider. If we need multiple slider then we will pass the 2 elements in an array to value props.
To simplify this in our custom slider we have created a new single prop which can be set to true for the single slider and false for multiple slider. This will take care of passing the number of elements to value props of the library.
Step 4: Using our Custom Scale Slider
That’s all! Now you have successfully built your custom scale slider component which can be reused across the applications.
Utilizing our CustomSlider
You can also refer my GitHub repository for the code:
