Slider Smoothness inside Modal.

[rajeevrocker7]

• [x] I have searched existing issues
• [x] I am using the latest multi slider version

Steps to Reproduce

Create a Component CustomModal for Modal,

in constructor(props) { super(props); this.state = { selectedMin: 1, selectedMax: 5 };

}

and inside that component CustomModal's render() -->

render() {

    return (
        <Modal
            ref={ref => this.modalRef = ref}
            animationType="none"
            transparent={true}
            animated={true}
            hardwareAccelerated={true}
            style={[containerStyle]}>

            <View style={overlayCon}
                ref={ref => { this.overLayRef = ref; }}>

                <MultiSlider
                    values={[
                        this.state.selectedMin,
                        this.state.selectedMax
                    ]}
                    sliderLength={isPlatformANDROID ? widthScale(270) : widthScale(270)}
                    onValuesChange={this.sliderOnValuesChange}
                    min={1}
                    max={5}
                    step={1}
                    allowOverlap={false}
                    snapped={true}
                    minMarkerOverlapDistance={56}
                    customMarker={CustomMarker}
                    touchDimensions={{
                        height: 40,
                        width: 40,
                        borderRadius: 20,
                        slipDisplacement: 40
                    }}
                    selectedStyle={{ backgroundColor: COLORS_.PRIMARY_GREEN_BLUE }}
                    unselectedStyle={{ backgroundColor: COLORS_.SLIDER_GREY_FILTER }}
                    enabledOne={true}
                    enabledTwo={true}
                    containerStyle={{
                        width: widthScale(270),
                        height: heightScale(12),
                        marginTop: heightScale(16),
                        alignSelf: 'center',
                        justifyContent: 'center',
                        backgroundColor: COLORS_.FULL_TRANSPARENT
                    }}
                />

            </View>
        </Modal>
    );

}

Expected Behavior

MultiSlider should be smooth, even it is snapped inside a Modal.

Actual Behavior

@ptomasroos MultiSlider not smooth, even it is snapped inside a Modal. touchDimensions not actually works.. it is quite hard to touch and drag it inside a modal.

[mwillems1994]

We are experiencing the same issue, have you ever found a fix to this?

[edritech93]

same for me

[Aryk]

Me too...I think it has something to do with blocking the gesture or pan responder...something related to that...I'm going to try to see if I can wrap it with some kind of View with some options on it, will report back.

[Aryk]

This hack made it work for me. I basically uncontrolled the component...

import React, {useState} from "react";
import MultiSlider from "@ptomasroos/react-native-multi-slider/MultiSlider";

// Super hacky fix for https://github.com/ptomasroos/react-native-multi-slider/issues/124
// Perhaps when it gets fixed we won't have to resort this awful hack...
const ModalSafeMultiSlider = ({
  values: initialValues,
  onValuesChange: _onValuesChange,
  onValuesChangeFinish: _onValuesChangeFinish,
  ...props
}: any) => {
  const [lastValues, setLastValues] = useState(initialValues);
  const [values, setValues]         = useState(initialValues);

  const onValuesChangeFinish = (v) => {
    setValues(lastValues);
    if (_onValuesChangeFinish) _onValuesChangeFinish(v);
  };

  const onValuesChange = (v) => {
    setLastValues(v);
    if (_onValuesChange) _onValuesChange(v);
  };

  return <MultiSlider {...props} {...{values, onValuesChangeFinish, onValuesChange}} />;
};

export { ModalSafeMultiSlider };

[skynetcmg47]

use onValuesChangeFinish instead of onValuesChange works for me.

[Aryk]

use onValuesChangeFinish instead of onValuesChange works for me.

Right but that is completely different behavior especially if you need a function to run while the user is moving the slider (like with a debounce).

My solution is the only working solution if you want that behavior.

[KyleAsaff]

I tried @Aryk's solution and can't get it to work. multi slider won't slide correctly inside of a modal. does anyone have any solutions to this problem? I need a slider with multiple a min/max otherwise Id use @react-native-community/slider. here is a GIF of the problem:

here is my code:

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import MultiSlider from '@ptomasroos/react-native-multi-slider';
import Slider from '@react-native-community/slider';

// Super hacky fix for https://github.com/ptomasroos/react-native-multi-slider/issues/124
// Perhaps when it gets fixed we won't have to resort this awful hack...
const ModalSafeMultiSlider = ({
  values: initialValues,
  onValuesChange: _onValuesChange,
  onValuesChangeFinish: _onValuesChangeFinish,
  ...props
}) => {
  const [lastValues, setLastValues] = useState(initialValues);
  const [values, setValues] = useState(initialValues);

  const onValuesChangeFinish = (v) => {
    setValues(lastValues);
    if (_onValuesChangeFinish) _onValuesChangeFinish(v);
  };

  const onValuesChange = (v) => {
    setLastValues(v);
    if (_onValuesChange) _onValuesChange(v);
  };

  return <MultiSlider {...props} {...{ values, onValuesChangeFinish, onValuesChange }} />;
};

const Filters = () => {
  const [max, setMax] = useState(10);
  const [min, setMin] = useState(0);
  return (
    <View style={styles.container}>
      <Text>@ptomasroos/react-native-multi-slider (does not work)</Text>
      <ModalSafeMultiSlider
        values={[min, max]}
        min={0}
        max={10}
        snapped={false}
        allowOverlap
      />
      <Text>@react-native-community/slider (works correctly)</Text>
      <Slider
        style={{ width: 200, height: 40 }}
        minimumValue={0}
        maximumValue={1}
        minimumTrackTintColor="#FFFFFF"
        maximumTrackTintColor="#000000"
        step={0.1}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 100,
    alignItems: 'center',
  },
});

export default Filters;

[barahonam1]

@KyleAsaff If that is react-native-bottom-sheet, you should disable its content panning gesture. In other words:

enableContentPanningGesture={false}

Then the multi-slider will work.

[urvashichhabra]

Any solution for this. Facing the same issue in ios with modal. Also tried gestureEnabled={false}

[wilmersondasilva]

@KyleAsaff If that is react-native-bottom-sheet, you should disable its content panning gesture. In other words:

enableContentPanningGesture={false}

Then the multi-slider will work.

Thanks, @barahonam1. It was exactly my scenario and your suggestion worked!

[igorwessel]

Any solution for this. Facing the same issue in ios with modal. Also tried gestureEnabled={false}

Anyone find solution for this?

[kanelloc]

Same problem with react navigation'a modal iOS Any solution? Tried gesturesEnabled but did not work

[Aryk]

@KyleAsaff If that is react-native-bottom-sheet, you should disable its content panning gesture. In other words:

enableContentPanningGesture={false}

Then the multi-slider will work.

Yes but that kills the ability to pan down to close.