jackdanielsandcode / react-native-multi-slider

Pure JS react native slider component with one or two markers.

react-native-multi-slider

Note: Anyone using RN <=0.18 should use version 0.2.5

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

Examples

Open iOS/Slider.xcodeproj with Xcode, then press Cmd + R; you may edit index.ios.js to try building your own custom sliders. Feel free to make a PR if you are particularly proud of your slider and want it to feature. (Shortcut npm run open:xcode)

index.ios.js

Getting Started

• Installation
• Properties
  • Basic Setup & Values
  • Event Callbacks
  • Slider Boundaries
  • Custom Style
• Question & Suggestions

Installation

$ npm i react-native-multi-slider --save

Properties

Basic Setup & Values

Prop	Default	Type	Description
values	[0]	array	An array containing one or two values (determines one or two markers respectively) that are the initial marker values. Note these must be possible values from your set up.
min	0	number	Slider min value corresponding to far left
max	10	number	Slider max value corresponding to far right
step	1	number	The step size between values. Make sure min max range is divisible by this to get expected results
optionsArray	-	array	Array of values corresponding to the slider's position (left to right on slider index 0 to end respectively). Values of any type can be inserted and the slider will simply give them back in the callbacks

Event Callbacks

Prop	Default	Type	Description
onValuesChangeStart	console.log...	function()	Function to be called at beginning of press
onValuesChange	console.log...	function(valuesArray)	Function called after every change in value, with current values passed in as an array.
onValuesChangeFinish	console.log...	function(valuesArray)	Function called on end of press with final values passed in as an array

Slider Boundaries

Prop	Default	Type	Description
sliderLength	280	number	Width of track
touchDimensions	{ height: 30, width: 30, borderRadius: 15, slipDisplacement: 30 },	object	Area to be touched, should enclose the whole marker. Will be automatically centered and contain the marker. Slip displacement If finger leaves the marker measures distance before responder cuts out and changes are no longer registered, if not given marker will be active until pressed released.
sliderOrientation	horizontal	horizontal or vertical	TODO

Custom Style

Prop	Default	Type	Description
containerStyle	{height:30}	object	Style of sliders container, note be careful in applying styles that may affect the children's (i.e. the slider's) positioning
trackStyle	{ borderRadius: 7, height: 3.5 }	object	Customise the track
selectedStyle	{backgroundColor: 'blue'}	object	Style for the track up to a single marker or between double markers
unselectedStyle	{backgroundColor: 'grey'}	object	Style for remaining track
markerStyle	{ height:30, width: 30, borderRadius: 15, backgroundColor:'#E8E8E8', borderWidth: 0.5, borderColor: 'grey'}	object	Customise the marker's style
pressedMarkerStyle	{backgroundColor:'#D3D3D3'}	object	Style to be given to marker when pressed

Questions & Suggestions

Feel free to create an issue x

react-native-multi-slider's Issues

Bug - Incorrect calculation of steps/step length

During the calculation of the width of each step on the screen, there is an issue that results in one more step than there are actual values in the slider:

this.stepLength = this.props.sliderLength/this.optionsArray.length;

This divides the width into steps based on the number of options in the array, rather than the number of gaps between each item. For example, in a slider with four options (let's say 1, 2, 3 and 4) there should be three steps (from 1 to 2, 2 to 3, and 3 to 4). However, because of this bug, the code treats it as if there are four steps. There is no change to the min/max values, but the points between the two ends are inexact and result in confusing behaviour - sometimes the slider will move without the value changing, and sometimes the value will change without the slider moving.

Having a look at the code, the solution is easy to implement:

this.stepLength = this.props.sliderLength/(this.optionsArray.length - 1);

Decreasing the options count by one will give the proper number of steps. This has to be done in two places: the getInitialState() and set(config) functions, both in Slider.js

Hopefully this fix can be implemented soon 🙂

Is it possible to style each marker separately (with multi slider)?

I would like to style both markers separately on a single slider. Is this possible?

When slider button is close to the edge of the screen, the screen itself is dragged and transitions to the next screen in the navigator

Slider marker may be outside of the width of the slider

Not working in RN 0.59

Not working in RN 0.59. is there any separate config needs to do?

Custom Markers

Hey, How do i keep different custom markers when i have 2 markers. (multi slider)

PropTypes.bool

Hi guys,
I have been trying to get the multislider to work with my React Native project. However whenever I try to import the multislider I receive an error message, Undefined is not an object (evaluating 'PropTypes.bool') it only shows up when I have used: import MultiSlider from 'react-native-mulit-slider'; at the top of my project.

Any advice of what I am doing wrong would be amazing!

Thanks

Slider not movable after reaching to maximum or minimum

After the slider reaches to the minimum value or maximum value, it is not movable anymore. It just freezes to that particular point. Is there any way to solve this?

Cannot move sliders after both sliders moved to maximum

When two sliders meets at the same value, higher marker is always at the top of the lower marker so when you want to slide, you can only slide right (as the higher slider cannot be lower than lower slider). When both sliders are moved to the highest value, you are unable to move any slider.

Move the sliders / reset the filter with code

It would be great if I could set the slider value with coding (not my finger). On the same note it would be good to have a "Reset filters" function that resets the filters to their original state.

Children Markers

Have option to pass in children react components to act as markers?

Does not work with Navigator gestures

When Navigator gestures are turned on the gestures take over and the and instead of the slider moving the screen gets dragged to the previous/next scene.

Marker visual position on track

I'm using a custom marker but in theory this could apply for the default marker.

I'd like to alter where the marker visually starts and finishes. Here's a crude mock up:

Is there / can you think of an easy way to modify to decide whether the marker is contained within the track or the current behaviour (centre of the mark)?

Donate the npm package name?

Hi !

As of Gradle 5.0 package's can't contain a @ symbol which my multislider has been published under for over a year and its actively maintained and as a significant amount of downloads per week.

Would you consider to donate your outdated package name to me so I can republish it under react-native-multi-slider instead of keeping it scoped which won't work in the beginning of 2019 any more?

Many thanks for considering. [email protected]

https://www.npmjs.com/package/react-native-multi-slider
https://www.npmjs.com/package/@ptomasroos/react-native-multi-slider

Cannot press directly on the track. sliding is the only option.

Update npm package

Seems that npm i react-native-multi-slider --save returns an outdated version.

Border radius disappears

When sliding both sliders all the way to the right, when sliding back again the border-radius has gone

a way to lock the slider?

I have a use case where I want to show the slider, but i dont want the user to be able to move the slider. Is there any way that I can implement my use case with the current compoment as it is?. If not, is there any plan to support this feature?

Vertical Slider

Create option to change orientation

MultiSlider with callback

I'd like to have ranged slider showing what value is selected. So far I managed to do this:

Sliding lower slider changes first value, but sliding upper slider does not. I do not know how to fix it. I suppose this can be done in onValuesChange props.

Code

constructor(props) {
		super(props)

		this.state = {
			formData: {},
			friends: 1098,
			sliderOneChanging: false,
			sliderTwoChanging: false,
			sliderOneValue: 3,
			sliderTwoValue: 7
		}

	}
[...]
sliderOneValuesChange = (values) => {
		let newValues = 0;
		newValues = values[0];
		this.setState({
			sliderOneValue: newValues,
		});
	}
[...]
<MultiSlider values={[this.state.sliderOneValue,this.state.sliderTwoValue]}
		sliderLength={280}
		onValuesChangeStart={this.sliderOneValuesChangeStart}
		onValuesChange={this.sliderOneValuesChange}
		onValuesChangeFinish={this.sliderOneValuesChangeFinish}/>

how to open always customLable on slider

Touch can be too small

Have a seperator view as a pan responder

Not working on Iphone 7 and on Simulator Iphone 6 (IOS 11.0)

Just do not works properly.

Upgrade version

Hi,

it seems you did not update the version when updating View.propTypes to ViewPropTypes

this is an issue as now it doesn't want to update to proper version
bump it up to 0.3.7

Thanks
Alex

undefined is not an object (evaluating 'PropTypes.bool')

Hi
I have this code but I recibe this error "undefined is not an object (evaluating 'PropTypes.bool')"

import React, { Component } from 'react';
Import Slider from 'react-native-multi-slider';
render (){
    const
      {
        distanceRange,
      } = this.state;
return(){
 <Slider
          style={{ marginLeft: 15, marginRight: 15 }}
          min={2}
          max={120}
          step={1}
          values={distanceRange}
          onValuesChange={val => this.setState({ distanceRange: val })}
        />
}}

Min / Max range divisibility

README should say:

"The step size between values. Make sure min max range is divisible by this, otherwise IT WON'T WORK"

Not just that "expected results" won't be realized.

latest npm release is broken

there's a duplicate react native dependency and packager crashes.
i installed it as a git dependency and it works fine, a new release is required.

Reset

Dear，
I am using your multi slider, it is awsone! but I would like to like, do it can reset?

Does this module support Android?

It seems that it doesn't work great in Android.

Is there a way to show the value above the marker so it slides as the marker moves?

Just like in this picture

RTL support

currently when you use slider in a RTL forced app, slider works backwards.

MultiSlider bottom bound can become greater than top bound

I have a MultiSlider with props: min={0} max={75} values={[0,75]}.

• When I drag the top bound all the way left the values become: [0,5]
• Then drag the bottom bound to the right... and you'll see the issue.
• Bottom bound becomes higher than top bound (i.e. values become: [40,5])

See:

Relicensing?

I'd like to use this for an app I'm making, but don't want to release it open source, which the GPL requires. Would it be possible to relicense this under something less restrictive?

Can i display initial and final value of slider on screen ?

No access...

I feel like some people are more equal in this organisation than others...

Disable handler

Default Marker too small

tried using this on android , not sure if its an android issue or a general one.
this is the line im using:
<MultiSlider containerStyle={{height:50}} values={[1,5]} step={1} sliderLength={280} onValuesChange={x=> {console.log(x)}} />

and this is what is rendered:

i tried debugging it a bit, it seems like the marker view being inside the trackview is affected by its style so it can be bigger then the track.

Slider length to 100%

Is it possible to set sliderLength to 100% of screen width?