ptomasroos / react-native-multi-slider

Android and iOS Pure JS react native multi slider
MIT License
775 stars 401 forks source link

Slider is not smooth #264

Closed musabgulfam closed 2 years ago

musabgulfam commented 2 years ago

The slider is not sliding as expected, it is not sliding smoothly, instead it is sliding in an awkward motion, i.e. it's frequently stopping and sliding.

Steps to Reproduce

Here's is the code

<MultiSlider
          values={[minPrice, maxPrice]}
          sliderLength={200}
          onValuesChange={handleValueChange}
          max={200}
          smoothSnapped={false}
          thumbTintColor={colors.secondaryColor}
          // touchDimensions={{
          //   height: 20,
          //   width: 20,
          //   borderWidth: 50
          // }}
/>

const handleValueChange = useCallback((val) => {
    setMaxPrice(val[1]);
    setMinPrice(val[0]);
    setFilterPayload({
      ...filterPayload,
      price: {
        min: val[0],
        max: val[1]
      }
    })
  }, []);

Expected Behavior

Actual Behavior

musabgulfam commented 2 years ago

???

JDMathew commented 2 years ago

If you set smoothSnapped={true} does this fix your problem? It will then snap on release.

musabgulfam commented 2 years ago

Alright, after a long time, I did observe a solution. Using onValueChange props is a bad idea. If you were to make it smooth, use the prop enableLabel, with a customLabel component which has the min and max values in its props to render the min and max values, and use the onValueChangeFinish prop to set the min and max values. So the final solution may look something like this.

       <MultiSlider
          values={[minPrice, maxPrice]}
          sliderLength={200}
          onValuesChangeFinish={handleValueChange}
          max={200}
          smoothSnapped={true}
          thumbTintColor={colors.secondaryColor}
          enableLabel
          customLabel={props => {
            return (
              <View>
                <Text style={{
                  color: '#121212',
                  fontSize: 25,
                  fontFamily: 'Oswald-Bold',
                  marginBottom: 10
                }}>${props.oneMarkerLeftPosition.toFixed(0)} - ${props.twoMarkerLeftPosition.toFixed(0)}</Text>
              </View>
            )
          }}
          step={1}
        />
manjubhatt commented 1 year ago

Alright, after a long time, I did observe a solution. Using onValueChange props is a bad idea. If you were to make it smooth, use the prop enableLabel, with a customLabel component which has the min and max values in its props to render the min and max values, and use the onValueChangeFinish prop to set the min and max values. So the final solution may look something like this.

       <MultiSlider
          values={[minPrice, maxPrice]}
          sliderLength={200}
          onValuesChangeFinish={handleValueChange}
          max={200}
          smoothSnapped={true}
          thumbTintColor={colors.secondaryColor}
          enableLabel
          customLabel={props => {
            return (
              <View>
                <Text style={{
                  color: '#121212',
                  fontSize: 25,
                  fontFamily: 'Oswald-Bold',
                  marginBottom: 10
                }}>${props.oneMarkerLeftPosition.toFixed(0)} - ${props.twoMarkerLeftPosition.toFixed(0)}</Text>
              </View>
            )
          }}
          step={1}
        />

In customLabel i am not able to set the range input using min and max. By default its picking the sliderLength as min and max. any solution?