Slider is not smooth

[musabgulfam]

Slider is not smooth

[musabgulfam]

???

[JDMathew]

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

[musabgulfam]

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]

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?