ptomasroos / react-native-multi-slider Goto Github PK
View Code? Open in Web Editor NEWAndroid and iOS Pure JS react native multi slider
License: MIT License
Android and iOS Pure JS react native multi slider
License: MIT License
Snap works great but I would like to display tick marks so the user can see where markers should snap to. Is this possible?
but it work if import ptomasroos/react-native-multi-slider
here https://github.com/ptomasroos/react-native-multi-slider/blob/master/example/Example.js#L14
Nothing else changed except my updating @ptomasroos/react-native-multi-slider from "0.0.8" to "0.0.10" in package.json and reinstalling/linking the node module.
What's especially weird is that onValuesChangeStart is not firing, but onValuesChangeFinish is- despite me giving them the same exact code save for "Start" and "Finish"
Has anyone else had this problem? It has the same issue regardless of if it's a single-value MultiSlider or a multi-value MultiSlider. I'll provide some of my (relevant) code but, given that it worked in 0.0.8, I'm not sure that it will be of much help.
Settings.js
<SettingsSlider
multi={false}
title="Foo"
onSlidingStart={() => {
this.setState({sliding: true});
}}
onValuesChange={(distance) => {
this.setProperty('searchDistance', distance)
}}
onSlidingStop={() => {
this.setState({sliding: false});
}}
minimumValue={0.1}
maximumValue={5}
value={this.state.settings.foo}
step={0.1}
valueText={this.state.settings.foo}
/>
SettingsItem.js
class SettingsSlider extends Component {
checkIfMultiSlider() {
if (this.props.multi) {
return (
<MultiSlider style={{ width: 0.8 * width }} min={this.props.minimumValue} max={this.props.maximumValue} values={[this.props.minSetValue, this.props.maxSetValue]} selectedStyle={{backgroundColor: '#157EFA'}} markerStyle={{borderWidth: 0.5, borderColor: 'lightgray', backgroundColor: '#FFF'}} onValuesChangeStart={() => this.props.onSlidingStart()} onValuesChange={(value) => this.props.onValuesChange(value)} onValuesChangeFinish={() => this.props.onSlidingStop()} />
);
} else {
return (
<MultiSlider style={{ width: 0.8 * width }} min={this.props.minimumValue} max={this.props.maximumValue} values={[this.props.value]} step={this.props.step} selectedStyle={{backgroundColor: '#157EFA'}} markerStyle={{borderWidth: 0.5, borderColor: 'lightgray', backgroundColor: '#FFF'}} onValuesChangeStart={() => this.props.onSlidingStart()} onValuesChange={(value) => this.props.onValuesChange(value)} onValuesChangeFinish={() => this.props.onSlidingStop()} />
)
}
}
render() {
return (
<TouchableHighlight style={{borderColor: 'lightgray', borderWidth: 1, height: 120, backgroundColor: 'white'}}>
<View style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'space-around' }}>
<View style={{ width, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingBottom: this.props.multi ? 70 : 70, paddingTop: this.props.multi ? 30 : 30 }}>
<Text style={{marginLeft: 15}}>{this.props.title}</Text>
<Text style={{color: 'gray', marginRight: 37}}>{this.props.valueText}</Text>
</View>
{this.checkIfMultiSlider()}
</View>
</TouchableHighlight>
);
}
}
Again, this code worked perfectly in 0.0.8. I only included what I thought was relevant but if more is needed I can provide it.
How can I handle cases when one of the values are out of range?
like the slider's min: 0 max: 100
but the values[1] is 1000
react-native 0.39.2
is out but using it causes an npm warning from react-native-multi-slider.
Hi,
It looks like the component has a significant bottom margin included with it. Can you please remove it? So the developer can choose whatever margin is needed for the project. Thanks!
touchDimensions.height and touchDimensions.width don't seem to be used for anything in MultiSlider.js?
I'm currently running some calculations every time the value changes when I'm sliding it, but I would like it to only fire the onValuesChange method a couple times every second.
Is there a way to limit this currently? I wasn't able to see anything popping out at me in the source code for this project. If not could it possibly be added?
Which property would I call in order to change the style of the markers?
Currently the markers go over the side of the line and I am trying to get the edge of the marker to touch the edge of the line.
This is what it looks like in case my description wasn't helpful:
https://imgur.com/a/GKp2y
The top image is what I want, the bottom image is what is currently happening.
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.
"@ptomasroos/react-native-multi-slider": "0.0.6"
,
"react": "15.4.1"
,
"react-native": "0.39.0",
Hey,
Be great to have the latest changes in the NPM. It's currently at 0.0.12 from 3 months ago!
Thanks!
I am trying to make a range slider using the native <Slider>
component. My goal is native perf and perfect native look.
My goal is to on press down, it should grab the slider that the press it is closest to. I have been trying for about a day with various stuff but can't figure it out.
I created a snack here: https://snack.expo.io/@noitsnack/rangeslider-cannot-move-one-in-back
I was wondering if you wanted to help me pursue this idea. I'm close but not quit there.
Here is a screenshot, the dot on the left is the slider in the back. I position the sliders on top of each other by using position: 'absolute'
.
It leads to some issues, like not being able to slide the one underneath. And preventing overlap is another.
Hello there.
I'm getting pretty desperate, as I've tried doing everything to make this look, however the right marker always seems to be out of screen. Applying width or padding, or even margin to containerStyles doesn't do the trick.
Here's the code
import React from 'react';
import Slider from '@ptomasroos/react-native-multi-slider';
import theme, { Text } from '@common';
import styled from 'styled-components';
const Container = styled.View`
height: auto;
flex: 1;
margin-top: -15px;
width: 100%;
`;
const SliderWrapper = styled.View`
width: 85%;
padding-right: 40px;
margin-right: 40px;
height: auto;
`;
const TimeLabelsWrapper = styled.View`
flex-direction: row;
justify-content: space-between;
width: 100%;
margin-bottom: 15px;
`;
const TimeLabel = Text.extend`
width: auto;
`;
const containerStyle = {
height: 'auto',
};
const trackStyle = {
height: 5,
borderRadius: 5,
};
const selectedStyle = {
backgroundColor: theme.orange,
};
const unselectedStyle = {
backgroundColor: theme.darkGray,
};
const markerStyle = {
backgroundColor: theme.primary,
width: 26,
height: 26,
borderRadius: 26,
};
const pressedMarkerStyle = {
width: 29,
height: 29,
};
export default function AvailabilitySlider(...props) {
return (
<Container>
<TimeLabelsWrapper>
<TimeLabel bold size={13}>
12:00 AM
</TimeLabel>
<TimeLabel bold size={13}>
9:00 AM
</TimeLabel>
</TimeLabelsWrapper>
<SliderWrapper>
<Slider
{...props}
trackStyle={trackStyle}
containerStyle={containerStyle}
selectedStyle={selectedStyle}
unselectedStyle={unselectedStyle}
markerStyle={markerStyle}
pressedMarkerStyle={pressedMarkerStyle}
values={[0, 5]}
/>
</SliderWrapper>
</Container>
);
}
Hey I have a situation where when the MultiSlider
first mounts my max and min values are undefined
because the system is still retrieving them. Shortly after they arrive and componentWillReceiveProps
is triggered and the proper values set to state . The MultiSlider
doesn't seem to react to the state change however and the markers stay at 0,0. The Text
components showing the current range are set correctly however, but when I try to move the markers the text components change to a range of 0-0 and the right marker jumps to the far right.
Is there something I'm doing wrong here? Can I get the markers and min/max to update properly?
My Code:
export class RangeMultiSlider extends React.Component{
constructor(props){
super(props);
console.log('this.props', this.props)
this.state = {
sliderValues: [this.props.min, this.props.max],
min: this.props.min,
max: this.props.max
};
}
onChangeValues = (values) => {
console.log('Slider values', values)
//console.log('this.props', this.props)
this.setState({
sliderValues: [values[0], values[1]]
});
}
onChangeValuesFinish() {
if (this.props.currentRefinement.min !== this.state.sliderValues[0] || this.props.currentRefinement.max !== this.state.sliderValues[1]) {
this.props.refine({min: this.state.sliderValues[0], max: this.state.sliderValues[1]});
}
}
componentWillReceiveProps(nextProps){
if(nextProps.min !== this.state.min && nextProps.max !== this.state.max) {
console.log('nextProps', nextProps)
this.setState({
sliderValues: [nextProps.min, nextProps.max],
min: nextProps.min,
max: nextProps.max
});
}
}
render(){
console.log('sliderValues', this.state.sliderValues)
return(
<View style={{padding:8}}>
<Text style={{paddingLeft: 10, fontSize: 14, color: Colors.primaryTextColor, alignSelf: 'flex-start' , textAlign: 'left'}}>
{`${this.props.header}:`}
</Text>
<View style={{paddingTop: 20, paddingLeft: 8}}>
<MultiSlider
sliderLength={150}
selectedStyle={{backgroundColor: Colors.mainColor}}
unselectedStyle={{backgroundColor: 'silver'}}
containerStyle={{height:10}}
//trackStyle={{height:10, backgroundColor: 'red'}}
touchDimensions={{
height: 40,
width: 40,
borderRadius: 20,
slipDisplacement: 40,
}}
onValuesChange={(sliderState) => this.onChangeValues(sliderState)}
min={this.state.min}
max={this.state.max}
//values={[this.props.currentRefinement.min, this.props.currentRefinement.max]}
onValuesChangeFinish={() => this.onChangeValuesFinish()}
values={[this.state.sliderValues[0], this.state.sliderValues[1]]}
step={1}
customMarker={SliderMarker}/>
</View>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={{fontSize: 14, color: Colors.primaryTextColor, textAlign: 'left'}}>
{this.state.sliderValues[0]}
</Text>
<Text style={{fontSize: 14, color: Colors.primaryTextColor , textAlign: 'right'}}>
{this.state.sliderValues[1]}
</Text>
</View>
</View>
)
}
}
Here is the console output:
this.props {refine: ƒ, currentRefinement: {…}, header: "Price", min: undefined, max: undefined}
sliderValues (2) [undefined, undefined]
nextProps {refine: ƒ, currentRefinement: {…}, header: "Price", min: undefined, max: undefined}
sliderValues (2) [undefined, undefined]
sliderValues (2) [undefined, undefined]
sliderValues (2) [undefined, undefined]
nextProps {refine: ƒ, currentRefinement: {…}, header: "Price", min: 7.99, max: 79.99}
sliderValues (2) [7.99, 79.99]
sliderValues (2) [7.99, 79.99]
Should this...
startOne = () => {
if (this.state.enabledOne) {
this.props.onValuesChangeStart();
this.setState({
onePressed: !this.state.onePressed,
});
}
};
startTwo = () => {
if (this.state.enabledTwo) {
this.props.onValuesChangeStart();
this.setState({
twoPressed: !this.state.twoPressed,
});
}
};
be this?
startOne = () => {
if (this.props.enabledOne) {
this.props.onValuesChangeStart();
this.setState({
onePressed: !this.state.onePressed,
});
}
};
startTwo = () => {
if (this.props.enabledTwo) {
this.props.onValuesChangeStart();
this.setState({
twoPressed: !this.state.twoPressed,
});
}
};
show min max values below the marker and update the values as the marker position changes
Are there any docs for this? Super confused as the api seems to be the same as this package but there is no reference to it as far as I can see.
Thanks, Jon
Hello!
So my problem is that my markers always start at 0, even though my initial state in my reducer is [18, 25].
Anyone knows how to solve this?
My code looks like this:
class multiSlider extends PureComponent{
render(){
const {
_setSliderState,
_setSliderValue,
_sliderState,
_sliderValue
} = this.props;
return(
<View style={{alignItems: "center", justifyContent: "center"}} >
<MultiSlider
values={[_sliderValue[0], _sliderValue[1]]}
sliderLength={width - 40}
min={18}
max={55}
onValuesChange={(values) => _setSliderValue(values)}
selectedStyle={{
backgroundColor: 'rgb(164, 39, 141)',
}}
trackStyle={{
height:5,
}}
touchDimensions={{
height: 200,
width: 40,
borderRadius: 30,
slipDisplacement: 40,
}}
customMarker={CustomMarker}
/>
</View>
)
}
}
Hello,
I would like to use this component vertically, do you think it is possible ?
The left marker was disappeared when I slided it left to right and right to left
react-native version is to old. update it?
If I use this component alone - it works perfect.
But if I use it with react-native-navigation with drawer enabled, once I swipe react-native-multi-slider - it slides a bit and stuck and then drawer is opening.
Default React Native Slider works perfect with react-native-navigation + drawer without lagging.
react-native-navigation with drawer enabled + react-native-multi-slider
Slider should continue to slide.
Slider slides a bit then stack and drawer opens.
Does this package support vertical orientation? If not will this be added to the package sometime?
I have two MultiSliders in a Form which contains an Age Range selector and Height range selector.
Everything works fine until the following steps:
Now MultiSlider No. 1 markers are reverted back to its original position
If now i make changes on MultiSlider No. 2 it reverts markers from MultiSlider No. 1 to its original positions. (without actually updating the state, only the markers are reverted)
...
this.state = {
ageRange: '21,36',
ageRangeText: '21-36',
heightRange: [],
heightRangeText: HeightConverter(175) + '-' + HeightConverter(190)
}
...
<MultiSlider key={1} values={[21,36]} step={1} min={18} max={70} sliderLength={SLIDER_WIDTH}
onValuesChange={(data) => {
this.setState({
ageRange: data[0] + ',' + data[1],
ageRangeText: data[0] + '-' + data[1]
});
}}
/>
...
<MultiSlider key={2} values={[175,190]} step={1} min={140} max={220} onValuesChange={(data) => {
this.setState({
heightRange: data,
heightRangeText: HeightConverter(data[0]) + '-' + HeightConverter(data[1])
})
}}
sliderLength={SLIDER_WIDTH} />
I'm trying to set up a slider with a custom marker that moves with a an updating value. But every time a render is called the Custom marker flickers and makes it hard to grab. If I remove the custom marker the standard marker works perfectly, no flickering and easy to grab.
Here is my slider:
<Multislider
customMarker={() => <Image source={scrubber}/>}
sliderLength={Dimensions.get('window').width - 40}
touchDimensions={{width: 50, height: 50}}
values={[Math.round(slowRacer.currentIndex || 0)]}/>
`moveOne = gestureState => {
if (!this.props.enabledOne) {
return;
}
var unconfined = gestureState.dx + this.state.pastOne;
var bottom = 0;
var trueTop = this.state.positionTwo - (this.props.allowOverlap ? 0 : this.stepLength);
var top = trueTop === 0 ? 0 : trueTop || this.props.sliderLength;
var confined = unconfined < bottom
? bottom
: unconfined > top ? top : unconfined;`
...
` moveTwo = gestureState => {
if (!this.props.enabledTwo) {
return;
}
var unconfined = gestureState.dx + this.state.pastTwo;
var bottom = this.state.positionOne + (this.props.allowOverlap ? 0 : this.stepLength);
var top = this.props.sliderLength;
var confined = unconfined < bottom
? bottom
: unconfined > top ? top : unconfined;`
In the source code, why does each PanResponder calculate the boundary position in different way? Is there any significant reason that moveOne should calculate trueTop? Isn't it enough
var top = this.state.positionTwo - (this.props.allowOverlap ? 0 : this.stepLength);
without trueTop, looks like more symmetric with moveTwo?
I used multi-slider and set the value for example [20,50], bit it doesn't work, it only work when I set value [0.10] or [3,7] .., so it seems the value range are limited in 0~10 ?
The latest changes from d99c326 are not available via NPM.
I have a component which use 2 different Slider.
One of the Slider is a simple one with 1 marker, the second one have 2 markers.
<MultiSlider
values={[this.state.search_distance]}
onValuesChange={this.searchDistanceValuesChange}
trackStyle={{height:2}}
selectedStyle={{backgroundColor: '#f77268'}}
containerStyle={{height:20,}}
sliderLength={_width-50}
customMarker={CustomMarker}
min={0}
max={5000}
step={1}
allowOverlap
snapped
/>
<MultiSlider
values={[this.state.ageRange[0], this.state.ageRange[1]]}
onValuesChange={this.multiSliderValuesChange}
trackStyle={{height:2}}
selectedStyle={{backgroundColor: '#f77268'}}
containerStyle={{height:20,}}
sliderLength={_width-50}
customMarker={CustomMarker}
min={18}
max={99}
step={1}
allowOverlap
snapped
/>
When i change the value of the 1 marker slider, everything is ok.
When i change the value of the 2 markers slider, the marker of the first slider move to the left of the track.
When i console.log into componentWillReceiveProps of the library, i see that both instance are called whenever a value is changed.
Build is successful, but running on Android simulator brings an error:
undefined is not an object (evaluating 'PropTypes.bool')
with references to files in node_modules/react-native-multi-slider/
mockProps.js:15:23
Slider.js:16:24
along with plenty of /metro-bundler/src/Resolver/polifills/require.js
Worked fine on RN 0.48.4
Any suggestions, perhaps?
I want to move the slider by tapping on the slider not just sliding by the marker. I can't find any prop or default settings to do it. Please can you help asap.
Hello @ptomasroos - It seems that the last npm release is from Aug 17, while many commits came in the past months.
When using the npm latest (0.3.6) I am getting code that break with react 16 and react-native .53. Especially in node_modules/react-native-multi-slider/mockProps.js
I have
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
PropTypes // ====> break with react 16
} = React;
Shall we take the latest in master branch rather than the npm latest version ? Any plan to issue a new version in npm ?
Tactac
Thank you for library. It's only way to make filters on android, but I have issue.
When I touch marker and release it, marker getting small. For the next time, it will returns to initial size. It is only happened with delay on touch out, only on Android.
I see, it should be like native Android slider (regular size marker - touch in - big size marker - touch out - regular size marker), but it's not. Can you help?
Hi,
Thanks for your react-native-multi-slider.
I use MultiSlider run it in my android emulator but can't display completely.
My package.json info is:
"dependencies": {
"babel-preset-react-native-stage-0": "*",
"react": "^15.3.1",
"react-native": "^0.32.0",
"react-native-carousel": "^0.10.0",
"react-native-form-generator": "^0.9.9",
"react-native-multi-slider": "^0.3.5",
"react-native-navigation": "file:../",
"react-native-picker": "^3.0.5",
"react-native-scrollable-tab-view": "^0.6.0",
"react-native-slider": "^0.9.1",
"react-native-swiper": "^1.4.11",
"react-native-vector-icons": "^2.1.0",
"react-redux": "^4.0.6",
"redux": "^3.0.5",
"redux-logger": "^2.6.1",
"redux-thunk": "^1.0.3",
"rn-bootstrap-buttons": "^1.0.4",
"seamless-immutable": "^5.0.1"
}
Hi and first off thanks for the good component I would love to use on my app, but I cannot at the moment because I can't find a way to disable both markers (I have an edit screen component that must render the slider component 'disabled and greyed out' if user is not in 'edit' mode).
Do you plan to add this functionality in the near future?
Cheers
I am new in react native and i haven't used slider. I have read doc but unknown api to use. i have comparison with api slider rn official and issues post but its different.
thanks
Callback value is not updating when sliding bar. It can be seen also on example gif.
Edit1: typos in
sliderOneValuesChangeStart
sliderOneValuesChange
sliderOneValuesChangeFinish
I'm finding this multi-slider really handy, but the library in npm is out of date; when I install I am not getting your most recent changes. Would you be able to update that?
I would really love to use the enable/disable functionality you added a few months back but I'm not getting those changes when I npm install.
I would like to disable logging when there is a change in the values. Is there a way to that?
Hey,
I am using the latest version of the react-native-multi-slider on an RTL app.
When testing and using I18nManager.forceRTL(true) the slider looks to function correctly until you try and move one of the markers.
What happens is that if you slide your finger right, the marker goes left. If you slide your finger left, the marker goes right.
I have managed to reproduce this issue on a clean project (iOS + Android).
I searched a bit here and saw that there was a PR for RTL support. I didn't have much time to read the changes but it seems it doesn't work / it stopped working.
Would love if this could be fixed!
Best,
Amit
When you enable snapped
, marker is shifted by one value to the right.
It's not noticeable for high values, but totally not usable when you set max to low value e.g. max={4}
.
This is <MultiSlider min={1} max={4} values={[1, 2]} />
but it shows 2 and 3 position.
There is incorrectly calculated index in converters.js
.
I will send PR right away.
I want to adjust the left
and right
properties of markerContainerOne
and markerContainerTwo
respectively, to mimic the the react-native
Slider
's marker behavior (which uses marker outer edge as "value indicator", rather than the center of the marker like this component). However it seems the value 24 is hardcoded:
const markerContainerOne = { top: -24, left : trackOneLength - 24 }
const markerContainerTwo = { top: -24, right: trackThreeLength - 24 };
I'm not sure what the best solution to this is, perhaps adding custom offset props?
static defaultProps = {
markerOffsetX: 0,
markerOffsetY: 0,
// ...
}
const { markerOffsetX, markerOffsetY } = this.props;
const markerContainerOne = { top: markerOffsetY - 24, left : trackOneLength + markerOffsetX - 24 }
const markerContainerTwo = { top: markerOffsetY - 24, right: trackThreeLength + markerOffsetX - 24 };
I can then do following to solve my problem.
<MultiSlider markerOffsetX={14} ...
Thoughts on this?
Hello. I am setting enabledOne={false} and/or enabledTwo={false} to disable my component, but my custom markerStyle is returning to the original shape of the marker; i.e. markerStyle is not working when the marker is disabled. However, implementing a customMarker gave me the results I desire, but I think it's not easy for the developer to think of this solution immediately (I spent almost a week thinking about it). I really like your component since it's is almost the only one that provides multiple markers, so I am opening this issue for you to take into consideration this special case and either add it in the documentation or provide a fix for it. Thanks for the amazing component, and wish you more to go!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.