question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Sliding back to old position

See original GitHub issue

Is anyone else having it slide back to its previous position after sliding it to a position? It only happens randomly at a few positions on the slider. Started happening on 3.0.2 and continued into 3.0.3. Happening on ios simulator and real device.

I tried changing the step and commenting out onValueChange and onSlidingComplete, but neither worked.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:7
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
JoelOnGithubcommented, Aug 6, 2020

We have the same issue. Happens only on iOS 13.6.x, 13.5.x is fine. Downgrading to react-native-slider to the latest version 2 solves it though.

1reaction
R4DIC4Lcommented, Feb 1, 2021

I noticed this only happens on android, on ios it seems to be working fine. I am using version 3.0.3.

I found an ugly workaround (hack) to send only the initial value by aving it on first change, as it seems that changing the value prop on android messes with the rendering when using the value in controlled mode (e.g.: in a form with redux-form or formik that saved the state value and sends it to the component) in react-native, while Slider knows how to properly display the slider thumb internally after change:

import { Platform } from 'react-native';
import Slider, { SliderProps } from '@react-native-community/slider';

function isValueNullOrUndefined(value: any): boolean {
  return value === null || value === undefined;
}

class CustomSlider extends React.Component<SliderProps> {
  private _initialValue?: number = undefined;

  handleValueChange = (value: number) => {
    if ( isValueNullOrUndefined(this._initialValue)) {
      this._initialValue = this.props?.value;
    }
    if (this.props.onValueChange) {
      this.props.onValueChange(value);
    }
  }

  getSliderValue = (value?: number) => {
    return Platform.OS === 'android' && !isValueNullOrUndefined(this._initialValue) ? this._initialValue : value;
  }

  render() {
    const { value, ...sliderProps } = this.props;

    const sliderValue = this.getSliderValue(value);

    return (
      <Slider
        value={sliderValue}
        {...sliderProps}
        onValueChange={this.handleValueChange}
      />
    );
  }
}

export default CustomSlider;

Seems onValueChange and onSlidingComplete themselves work fine, they report when user changes the value (I also use a text component next to the slider to check the value), it is just the rendering with value prop interference for android.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Slider sliding back to original position - Stack Overflow
Now what I'm trying to achieve is: For the slider to slide back to its original position, 0, after arriving at its end....
Read more >
When Should You Accept a Lower Position? | Monster.com
Whether you're overqualified or thinking of downshifting, it's true that moving up isn't the only way to advance your career. Here's when and...
Read more >
How to move the Windows Taskbar from its default position or ...
Hold down the primary mouse button, and then drag the mouse pointer to the place on the screen where you want the taskbar....
Read more >
ATP and Muscle Contraction | Biology for Majors II
The movement of the myosin head back to its original position is called the recovery stroke. Resting muscles store energy from ATP in...
Read more >
Rotations, Specialization, Positions, Switching and Stacking
Most people who have played any volleyball have been introduced to the idea of service rotation. There are six positions on the court...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found