[react-native] range slider (feat . @ptomasroos/react-native-multi-slider)

 

 

숫자의 범위를 지정하는 라이브러리가 필요했다.

 

https://www.npmjs.com/package/@ptomasroos/react-native-multi-slider

@ptomasroos/react-native-multi-slider

 

 

사용법이 어렵지 않았고, 커스텀 하기도 편해서 자주 애용할 듯 하다.

 

 

 

 

  const customMarker = (index) => {
    return (
      <View style={styles.marker}>
        <Text>{ageRange[index]}</Text>
      </View>
    );
  };
  
  ...

<MultiSlider
  isMarkersSeparated={true}
  values={ageRange}
  sliderLength={380}
  onValuesChange={(values) => setAgeRange(values)}
  min={0}
  max={100}
  step={1}
  customMarkerLeft={() => customMarker(0)}
  customMarkerRight={() => customMarker(1)}
  selectedStyle={{ backgroundColor: colors.navy }}
  unselectedStyle={{ backgroundColor: colors.lightGray }}
/>