Feat/slider

example/storybook/.ondevice/storybook.requires.js

@@ -59,6 +59,8 @@ const getStories = () => {
     require('../src/styled/api/MultipleTheme/MultipleTheme.stories.tsx'),
     // require('../src/ui/components/DataDisplay/Badge/Badge.stories.tsx'),
     require('../src/ui/components/DataDisplay/Card/Card.stories.tsx'),
+    require('../src/ui/components/Forms/RangeSlider/RangeSlider.stories.tsx'),
+
     // require('../src/ui/components/Forms/Button/ButtonGroup.stories.tsx'),
     // require('../src/ui/components/Forms/Checkbox/Checkbox.stories.tsx'),
     // require('../src/ui/components/DataDisplay/Divider/Divider.stories.tsx'),
@@ -76,7 +78,7 @@ const getStories = () => {
     // require('../src/ui/components/Feedback/Progress/Progress.stories.tsx'),
     // require('../src/ui/components/Forms/Radio/Radio.stories.tsx'),
     // require('../src/ui/components/Forms/Select/Select.stories.tsx'),
-    // require('../src/ui/components/Forms/Slider/Slider.stories.tsx'),
+    require('../src/ui/components/Forms/Slider/Slider.stories.tsx'),
     // require('../src/ui/components/Feedback/Spinner/Spinner.stories.tsx'),
     // require('../src/ui/components/Forms/Switch/Switch.stories.tsx'),
     // require('../src/ui/components/Forms/Textarea/Textarea.stories.tsx'),

example/storybook/.storybook/preview.js

@@ -73,6 +73,7 @@ export const parameters = {
             'Radio',
             'Select',
             'Slider',
+            'Range Slider',
             'Switch',
             'Tabs',
             'Textarea',

example/storybook/babel.config.js

@@ -12,6 +12,10 @@ module.exports = function (api) {
               __dirname,
               '../../packages/themed/src'
             ),
+            '@gluestack-ui/range-slider': path.join(
+              __dirname,
+              '../../packages/unstyled/range-slider/src'
+            ),
             '@gluestack-ui/config': path.join(
               __dirname,
               '../../packages/config/src/gluestack-ui.config'

example/storybook/metro.config.js

@@ -32,4 +32,4 @@ config.transformer.getTransformOptions = async () => ({
 
 config.watchFolders = [...config.watchFolders];
 
-module.exports = config;
+module.exports = config;

example/storybook/package.json

@@ -56,7 +56,7 @@
     "react": "^18.2.0",
     "react-aria": "^3.30.0",
     "react-dom": "^18.2.0",
-    "react-native": "0.72.4",
+    "react-native": "^0.73.2",
     "react-native-gesture-handler": "^2.12.1",
     "react-native-safe-area-context": "^4.4.1",
     "react-native-svg": "13.4.0",

example/storybook/src/ui/components/Forms/RangeSlider/RangeSlider.stories.tsx

@@ -0,0 +1,11 @@
+import type { ComponentMeta } from '@storybook/react-native';
+import RangeSlide from './RangeSlider';
+
+const SliderMeta: ComponentMeta<typeof RangeSlide> = {
+  title: 'stories/FORMS/Range Slider',
+  component: RangeSlide,
+};
+
+export default SliderMeta;
+
+export { RangeSlide };

example/storybook/src/ui/components/Forms/RangeSlider/RangeSlider.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import {
+  Center,
+  RangeSlider,
+  RangeSliderTrack,
+  RangeSliderFilledTrack,
+  RangeSliderLeftThumb,
+  RangeSliderRightThumb,
+  Text,
+  VStack,
+  HStack,
+  Box,
+  Icon,
+  Heading,
+  Tooltip,
+  TooltipContent,
+  Button,
+} from '@gluestack-ui/themed';
+
+const RangeSliderBasic = ({ ...props }: any) => {
+  const [sliderValue, setSliderValue] = React.useState([20, 49]);
+
+  return (
+    <Center alignItems="center" w={200}>
+      <RangeSlider
+        sliderTrackHeight={4}
+        {...props}
+        mt="$4"
+        size="lg"
+        value={sliderValue}
+        onChange={setSliderValue}
+        label="RangeSlider"
+      >
+        <RangeSliderTrack>
+          <RangeSliderFilledTrack />
+        </RangeSliderTrack>
+        <RangeSliderLeftThumb />
+        <RangeSliderRightThumb />
+      </RangeSlider>
+    </Center>
+  );
+};
+
+RangeSliderBasic.description =
+  'This is a basic RangeSlider component example. RangeSlider are used to select a value from a range of values.';
+
+export default RangeSliderBasic;
+
+export {
+  Center,
+  RangeSlider,
+  RangeSliderTrack,
+  RangeSliderFilledTrack,
+  RangeSliderLeftThumb,
+  RangeSliderRightThumb,
+  Text,
+  VStack,
+  HStack,
+  Box,
+  Icon,
+  Heading,
+  Tooltip,
+  TooltipContent,
+  Button,
+};
+export { Volume, Volume2Icon, LightbulbIcon } from 'lucide-react-native';