Create minExample

minExample

@@ -0,0 +1,77 @@
+import React, {useCallback, useState} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import Slider from 'rn-range-slider';
+import {moderateScale, SCREEN_WIDTH} from '../constants/scaling';
+import colors from '../constants/theme';
+
+const Thumb = () => {
+  return <View style={{width: 20, height: 20, backgroundColor: 'green'}} />;
+};
+
+const Rail = () => {
+  return (
+    <View
+      style={{
+        height: 5,
+        width: '100%',
+        backgroundColor: 'yellow',
+      }}
+    />
+  );
+};
+
+const RailSelected = () => {
+  return <View style={{backgroundColor: 'red'}} />;
+};
+
+const Label = () => {
+  return (
+    <View>
+      <Text>ia ma label</Text>
+    </View>
+  );
+};
+
+const Notch = () => {
+  return <View style={{backgroundColor: 'blue', width: 6, height: 6}} />;
+};
+const CustomRangeSlider = () => {
+  const [low, setLow] = useState(0);
+  const [high, setHigh] = useState(100);
+  const renderThumb = useCallback(() => <Thumb />, []);
+  const renderRail = useCallback(() => <Rail />, []);
+  const renderRailSelected = useCallback(() => <RailSelected />, []);
+  const renderLabel = useCallback(value => <Label text={value} />, []);
+  const renderNotch = useCallback(() => <Notch />, []);
+  const handleValueChange = useCallback((low, high) => {
+    console.log(low, high);
+    setLow(low);
+    setHigh(high);
+  }, []);
+  return (
+    <Slider
+      style={styles.slider}
+      min={30}
+      max={100}
+      step={1}
+      renderThumb={renderThumb}
+      renderRail={renderRail}
+      renderRailSelected={renderRailSelected}
+      renderLabel={renderLabel}
+      renderNotch={renderNotch}
+      onValueChanged={handleValueChange}
+    />
+  );
+};
+
+export default CustomRangeSlider;
+
+const styles = StyleSheet.create({
+  slider: {
+    width: SCREEN_WIDTH - moderateScale(16),
+    marginTop: moderateScale(5),
+    backgroundColor: colors.white,
+    justifyContent: 'center',
+    height: moderateScale(45),
+  },
+});