Comments (2)
Classic. Just after writing down the issue, I found the right combination. I would expect onValuesChangeFinish() could let just do the side-effect action without changing any values behavior internally, but oh well, this will do afterall:
<MultiSlider
...
values={[peakSliderValues[0], peakSliderValues[1]]}
onValuesChangeFinish={values => {
setPeakSliderValues(values);
setPeakStartDate(addDays(minDate, values[0]));
setPeakEndDate(addDays(minDate, values[1]));
}}
Cheers
from react-native-multi-slider.
Hm, reopening the issue, seems there is something weird indeed.
const [sliderValues, setSliderValues] = useState([0, 10]);
useEffect(() => {
//debugger;
setSliderValues(values);
}, values);
const updateValues = values => {
//debugger;
props.onValueChanged(values); // Comes from parent component as param (posting below)
};
<MultiSlider
containerStyle={{ paddingHorizontal: 16 }}
selectedStyle={{ backgroundColor: theme.colors.primary }}
trackStyle={{ backgroundColor: theme.colors.secondary }}
sliderLength={width - 32} //minus the 2 * padding
values={[sliderValues[0], sliderValues[1]]}
snapped
step={1}
min={0}
max={steps}
enabledOne={true}
enabledTwo={true}
enableLabel={true}
//smoothSnapped={true}
customLabel={props => (
<SliderLabel
startDate={initialDate}
labelOne={'Peak starts on'}
labelTwo={'Peak ends on'}
{...props}
/>
)}
//onValuesChangeFinish={onValueChanged}
onValuesChangeFinish={values => {
setSliderValues(values);
updateValues(values);
console.log('vlaues', values);
}}
/>
And this is called from:
<Slider
// other props ...
onValueChanged={values => {
setPeakStartDate(addDays(dateCompStart, values[0])); // just React.useState() setters
setPeakEndDate(addDays(dateCompStart, values[1]));
}}
/>
If I comment out updateValues(values);
method, the slider works ok. If I keep it uncommented, the sliders are reset back to initial position after releasing the finger.
Any advice?
from react-native-multi-slider.
Related Issues (20)
- Markers HOT 4
- Image disappears when the value changes
- Discrete Behavior Of Slider.
- When use slider in view with rotation the behaviour is different
- How to turn this slider into a single value slider? HOT 3
- Slider is not smooth HOT 4
- Publish actual version HOT 2
- Not correct position of step markes and labels HOT 3
- Fix vulnerabilities
- Component does not accept testID HOT 4
- [Feature request] Add prop to customize third track color HOT 1
- Build failed : Unsupported class file major version 62
- Sometimes it's hard to slide the markers. Getting freeze on slide.
- missing props HOT 2
- CustomLeftMarker & CustomRightMarker not working HOT 1
- Markers don't move in one direction when overlapping HOT 2
- max value HOT 2
- Get NaN on minimum value
- Project still maintained?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-multi-slider.