diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index 986b0860..8d5c2cc3 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -302,6 +302,8 @@ PODS:
   - React-jsinspector (0.70.1)
   - React-logger (0.70.1):
     - glog
+  - react-native-pager-view (6.1.1):
+    - React-Core
   - react-native-slider (4.3.3):
     - React-Core
   - React-perflogger (0.70.1)
@@ -422,6 +424,7 @@ DEPENDENCIES:
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
+  - react-native-pager-view (from `../node_modules/react-native-pager-view`)
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -498,6 +501,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/jsinspector"
   React-logger:
     :path: "../node_modules/react-native/ReactCommon/logger"
+  react-native-pager-view:
+    :path: "../node_modules/react-native-pager-view"
   react-native-slider:
     :path: "../node_modules/@react-native-community/slider"
   React-perflogger:
@@ -562,6 +567,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 47201924064085223b63ec7e3ee9fd40ad8508e8
   React-jsinspector: 1363be638eccfe1aea1b10dd42e632b0397e5ec8
   React-logger: 7bd569e3857d74ed412ce0a5c51f421ff7d4ca7f
+  react-native-pager-view: 3c66c4e2f3ab423643d07b2c7041f8ac48395f72
   react-native-slider: 7d19220da2f2ae7cbb9aa80127cb73c597fa221f
   React-perflogger: 48c6b363e867d64b682e84f80ca45636bd65e19c
   React-RCTActionSheet: 33c74fe5c754835e3715c300618da9aa2f7203fa
diff --git a/example/package-lock.json b/example/package-lock.json
index 47f92b74..06ec3163 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -31,6 +31,7 @@
         "jest": "^26.6.3",
         "metro-config": "^0.72.2",
         "metro-react-native-babel-preset": "^0.72.1",
+        "react-native-pager-view": "^6.1.1",
         "react-test-renderer": "18.1.0",
         "rimraf": "^3.0.2",
         "typescript": "^4.8.2"
@@ -14412,6 +14413,16 @@
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz",
       "integrity": "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A=="
     },
+    "node_modules/react-native-pager-view": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-6.1.1.tgz",
+      "integrity": "sha512-4WqR0YWBjaUtc3iPVk8w6wsTsMq+r0plNiXdqPXOiUdQIhxKfsP1iqb6hRzdeJKOo8UH7RCP6zI7dxdFEAXzrw==",
+      "dev": true,
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-windows": {
       "version": "0.70.0",
       "resolved": "https://registry.npmjs.org/react-native-windows/-/react-native-windows-0.70.0.tgz",
@@ -28203,6 +28214,13 @@
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz",
       "integrity": "sha512-oOanj84fJEXUg9FoEAQomA8ISG+DVIrTZ3qF7m69VQUJyOGYyDZmPqKcjvRku4KXlEH6hWO9i4ACLzNBh8gC0A=="
     },
+    "react-native-pager-view": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-6.1.1.tgz",
+      "integrity": "sha512-4WqR0YWBjaUtc3iPVk8w6wsTsMq+r0plNiXdqPXOiUdQIhxKfsP1iqb6hRzdeJKOo8UH7RCP6zI7dxdFEAXzrw==",
+      "dev": true,
+      "requires": {}
+    },
     "react-native-windows": {
       "version": "0.70.0",
       "resolved": "https://registry.npmjs.org/react-native-windows/-/react-native-windows-0.70.0.tgz",
diff --git a/example/package.json b/example/package.json
index c1edbb33..03943926 100644
--- a/example/package.json
+++ b/example/package.json
@@ -35,11 +35,12 @@
     "copyfiles": "^2.4.1",
     "eslint": "^7.32.0",
     "jest": "^26.6.3",
+    "metro-config": "^0.72.2",
     "metro-react-native-babel-preset": "^0.72.1",
+    "react-native-pager-view": "^6.1.1",
     "react-test-renderer": "18.1.0",
     "rimraf": "^3.0.2",
-    "typescript": "^4.8.2",
-    "metro-config": "^0.72.2"
+    "typescript": "^4.8.2"
   },
   "jest": {
     "preset": "react-native",
diff --git a/example/src/App.tsx b/example/src/App.tsx
index fe6fbcfa..e506002f 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,30 +1,94 @@
-import React from 'react';
-import {Platform, ScrollView, StyleSheet, Text, View} from 'react-native';
-import {examples} from './Examples';
+import React, {useState} from 'react';
+import {
+  Platform,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import {examples, Props as ExamplesTabProperties} from './Examples';
+import {propsExamples, Props as PropsTabProperties} from './Props';
+import PagerView from 'react-native-pager-view';
+import Slider from '@react-native-community/slider';
 
 const App = () => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const titles = ['Examples', 'Props'];
+
+  const renderExampleTab = (
+    sliders: PropsTabProperties[] | ExamplesTabProperties[],
+    filtered?: boolean,
+  ) => {
+    return (
+      <View>
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={styles.container}>
+          {(filtered
+            ? (sliders as ExamplesTabProperties[]).filter(
+                e => !e.platform || e.platform === Platform.OS,
+              )
+            : sliders
+          ).map((e, i) => (
+            <View key={`slider${i}`} style={styles.sliderWidget}>
+              <Text style={styles.instructions}>{e.title}</Text>
+              {e.render()}
+            </View>
+          ))}
+        </ScrollView>
+      </View>
+    );
+  };
+
   return (
-    <ScrollView
-      style={styles.scrollView}
-      contentContainerStyle={styles.container}>
-      <Text testID="testTextId" style={styles.title}>
-        {'<Slider />'}
-      </Text>
-      {examples
-        .filter(e => !e.platform || e.platform === Platform.OS)
-        .map((e, i) => (
-          <View key={`slider${i}`} style={styles.sliderWidget}>
-            <Text style={styles.instructions}>{e.title}</Text>
-            {e.render()}
-          </View>
-        ))}
-    </ScrollView>
+    <SafeAreaView style={styles.homeScreenContainer}>
+      <View>
+        <Slider
+          step={1}
+          maximumValue={3}
+          minimumValue={0}
+          style={pageViewPositionSlider.style}
+          value={currentPage + 1}
+          thumbTintColor={pageViewPositionSlider.thumbColor}
+          disabled
+          maximumTrackTintColor={pageViewPositionSlider.trackColor}
+          minimumTrackTintColor={pageViewPositionSlider.trackColor}
+        />
+        <Text testID="testTextId" style={styles.title}>
+          {titles[currentPage]}
+        </Text>
+      </View>
+      <PagerView
+        initialPage={0}
+        style={styles.pagerViewContainer}
+        onPageSelected={e => {
+          setCurrentPage(e.nativeEvent.position);
+        }}>
+        {renderExampleTab(examples, true)}
+        {renderExampleTab(propsExamples)}
+      </PagerView>
+    </SafeAreaView>
   );
 };
 
 export default App;
 
+const pageViewPositionSlider = {
+  trackColor: '#ABABAB',
+  thumbColor: '#1411AB',
+  style: {
+    width: '100%',
+  },
+};
+
 const styles = StyleSheet.create({
+  pagerViewContainer: {
+    flex: 1,
+  },
+  homeScreenContainer: {
+    flex: 1,
+  },
   scrollView: {
     backgroundColor: '#F5FCFF',
   },
@@ -34,7 +98,8 @@ const styles = StyleSheet.create({
     paddingVertical: 20,
   },
   title: {
-    fontSize: 20,
+    fontSize: 30,
+    color: pageViewPositionSlider.thumbColor,
     textAlign: 'center',
     width: '100%',
     marginVertical: 20,
diff --git a/example/src/Examples.tsx b/example/src/Examples.tsx
index 6a02f786..6c7681b6 100644
--- a/example/src/Examples.tsx
+++ b/example/src/Examples.tsx
@@ -2,6 +2,12 @@ import React, {useState} from 'react';
 import {Text, View, StyleSheet} from 'react-native';
 import Slider, {SliderProps} from '@react-native-community/slider';
 
+export interface Props {
+  title: string;
+  render(): JSX.Element;
+  platform?: string;
+}
+
 const SliderExample = (props: SliderProps) => {
   const [value, setValue] = useState(0);
   return (
@@ -72,7 +78,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export const examples = [
+export const examples: Props[] = [
   {
     title: 'Default settings',
     render() {
diff --git a/example/src/Props.tsx b/example/src/Props.tsx
new file mode 100644
index 00000000..11749ed6
--- /dev/null
+++ b/example/src/Props.tsx
@@ -0,0 +1,199 @@
+import React, {useState} from 'react';
+import {Text, View, StyleSheet} from 'react-native';
+import Slider, {SliderProps} from '@react-native-community/slider';
+
+export interface Props {
+  title: string;
+  render(): JSX.Element;
+}
+
+const SliderExample = (props: SliderProps) => {
+  const [value, setValue] = useState(0);
+  return (
+    <View>
+      <Text style={styles.text}>{value && +value.toFixed(3)}</Text>
+      <Slider style={styles.slider} {...props} onValueChange={setValue} />
+    </View>
+  );
+};
+
+const SlidingStartExample = (props: SliderProps) => {
+  const [slideStartingValue, setSlideStartingValue] = useState(0);
+  const [slideStartingCount, setSlideStartingCount] = useState(0);
+  return (
+    <View>
+      <SliderExample
+        {...props}
+        onSlidingStart={value => {
+          setSlideStartingValue(value);
+          setSlideStartingCount(prev => prev + 1);
+        }}
+      />
+      <Text>
+        Starts: {slideStartingCount} Value: {slideStartingValue}
+      </Text>
+    </View>
+  );
+};
+
+const SlidingCompleteExample = () => {
+  const [slideCompletionValue, setSlideCompletionValue] = useState(0);
+  const [slideCompletionCount, setSlideCompletionCount] = useState(0);
+  return (
+    <View>
+      <SliderExample
+        onSlidingComplete={value => {
+          setSlideCompletionValue(value);
+          setSlideCompletionCount(prev => prev + 1);
+        }}
+      />
+      <Text>
+        Completions: {slideCompletionCount} Value: {slideCompletionValue}
+      </Text>
+    </View>
+  );
+};
+
+export default SliderExample;
+
+const styles = StyleSheet.create({
+  slider: {
+    width: 300,
+    opacity: 1,
+    height: 50,
+    marginTop: 10,
+  },
+  text: {
+    fontSize: 14,
+    textAlign: 'center',
+    fontWeight: '500',
+    margin: 0,
+  },
+});
+
+export const propsExamples: Props[] = [
+  {
+    title: 'Default settings',
+    render() {
+      return <SliderExample />;
+    },
+  },
+  {
+    title: 'disabled',
+    render() {
+      return <SliderExample disabled />;
+    },
+  },
+  {
+    title: 'maximumValue',
+    render() {
+      return <SliderExample maximumValue={10} />;
+    },
+  },
+  {
+    title: 'minimumTrackTintColor',
+    render() {
+      return <SliderExample minimumTrackTintColor="#123456" />;
+    },
+  },
+  {
+    title: 'minimumValue',
+    render() {
+      return <SliderExample minimumValue={5} />;
+    },
+  },
+  {
+    title: 'onSlidingStart',
+    render() {
+      return <SlidingStartExample />;
+    },
+  },
+  {
+    title: 'onSlidingComplete',
+    render() {
+      return <SlidingCompleteExample />;
+    },
+  },
+  {
+    title: 'onValueChange',
+    render() {
+      return <SliderExample />;
+    },
+  },
+  {
+    title: 'step',
+    render() {
+      return <SliderExample step={0.1} />;
+    },
+  },
+  {
+    title: 'maximumTrackTintColor',
+    render() {
+      return <SliderExample maximumTrackTintColor="#123456" />;
+    },
+  },
+  {
+    title: 'value',
+    render() {
+      return <SliderExample value={0.5} />;
+    },
+  },
+  {
+    title: 'tapToSeek',
+    render(): React.ReactElement {
+      return <SliderExample tapToSeek={true} />;
+    },
+  },
+  {
+    title: 'inverted',
+    render() {
+      return <SliderExample inverted />;
+    },
+  },
+  {
+    title: 'vertical',
+    render() {
+      return <SliderExample vertical />;
+    },
+  },
+  {
+    title: 'thumbTintColor',
+    render() {
+      return <SliderExample thumbTintColor={'magenta'} />;
+    },
+  },
+  {
+    title: 'maximumTrackImage',
+    render() {
+      return (
+        <SliderExample
+          maximumTrackImage={require('./resources/slider-right.png')}
+        />
+      );
+    },
+  },
+  {
+    title: 'minimumTrackImage',
+    render() {
+      return (
+        <SliderExample
+          minimumTrackImage={require('./resources/slider-left.png')}
+        />
+      );
+    },
+  },
+  {
+    title: 'thumbImage',
+    render() {
+      return (
+        <SliderExample thumbImage={require('./resources/uie_thumb_big.png')} />
+      );
+    },
+  },
+  {
+    title: 'trackImage',
+    render() {
+      return <SliderExample trackImage={require('./resources/slider.png')} />;
+    },
+  },
+];
diff --git a/example/tsconfig.json b/example/tsconfig.json
index 8fb7cf79..f377cccf 100644
--- a/example/tsconfig.json
+++ b/example/tsconfig.json
@@ -3,6 +3,7 @@
   "include": ["src/**/*"],
   "extends": "@tsconfig/react-native/tsconfig.json",     /* Recommended React Native TSConfig base */
   "compilerOptions": {
+    "jsx": "react",
     /* Visit https://aka.ms/tsconfig.json to read more about this file */
 
     /* Completeness */