react-native-gradient-multi-slider

Pure JS react native slider component with one or two markers. Options to customize track, touch area and provide customer markers and callbacks for touch events and value changes.

Examples

cd example/Basic
npm install
react-native run-ios
react-native run-android

Getting Started

• Installation

Installation

$ npm install --save react-native-gradient-multi-slider
$ yarn add -D react-native-gradient-multi-slider

Usage in a ScrollView

import MultiSlider from 'react-native-gradient-multi-slider';

<MultiSlider
    sliderLength={250}
    min={0}
    max={12}
    step={1}
/>

shape up CustomMarker as left and right

In order to make different styles on markers you can set isMarkersSeparated to true, define customMarkerLeft and customMarkerRight in MultiSlider. for example:

<MultiSlider
    ...
    isMarkersSeparated={true}

    customMarkerLeft={(e) => {
         return (<CustomSliderMarkerLeft
          currentValue={e.currentValue}/>)
    }}

    customMarkerRight={(e) => {
         return (<CustomSliderMarkerRight
         currentValue={e.currentValue}/>)
    }}
/>

Partial report of the props

Feel free to contribute to this part of the documentation.

Prop Name	Default	Type	Purpose
values	[0]	Array	Prefixed values of the slider
gradientColors	#...	Array	Gradient colors for slider track
onValuesChangeStart	() => {}	Function	Callback when value starts changing
onValuesChange	() => {}	Function	Callback when value changes
onValuesChangeFinish	() => {}	Function	Callback when value stops changing
sliderLength	280	Number	Length of the slider
touchDimensions	{...}	Object	Touch dimensions configuration
enableLabel		Function	Enable label rendering
customLabel		Function	Component for rendering label above
customMarker		Function	Component for cursor
customMarkerLeft		Function	Component for left cursor
customMarkerRight		Function	Component for right cursor
isMarkersSeparated		Boolean	Explanation in README.md
min	0	Number	Minimum value available in slider
max	10	Number	Maximum value available in slider
step	1	Number	Step value of slider
optionsArray		Array	Possible values of slider
Styles	{...}	Style	Slider styles
valuePrefix		String	Prefix added to value
valueSuffix		String	Suffix added to value
enabledOne	true	Boolean	Enables first cursor
enabledTwo	true	Boolean	Enables second cursor
stepsAs	[]	Array	Customize step labels
showSteps	false	Boolean	Show steps
showStepMarkers	true	Boolean	Show step markers on track
showStepLabels	true	Boolean	Show step labels underneath track
onToggleOne		Function	Listener when first cursor toggles
onToggleTwo		Function	Listener when second cursor toggles
allowOverlap	false	Boolean	Allow overlap within cursors
snapped	false	Boolean	Fixed position for markers
smoothSnapped	false	Boolean	Snap to nearest marker on release
vertical	false	Boolean	Use vertical orientation
markerOffsetX	0	Number	Offset cursor(s) on X axis
markerOffsetY	0	Number	Offset cursor(s) on Y axis
markerSize	0	Number	Marker margin from track edges
minMarkerOverlap...	0	Number	Closest distance between markers (pixels)
imageBackground...		String	ImageBackground source
testID		String	Used in end-to-end tests