From 6c35fcf5ee31b5359d8208a8207c9093f16d88bd Mon Sep 17 00:00:00 2001
From: Aftab Amin <34965107+AftabUfaq@users.noreply.github.com>
Date: Thu, 19 Jan 2023 12:05:40 +0500
Subject: [PATCH] Create minExample

add example
---
 minExample | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 minExample

diff --git a/minExample b/minExample
new file mode 100644
index 0000000..9bc7f05
--- /dev/null
+++ b/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),
+  },
+});