diff --git a/package-lock.json b/package-lock.json
index 94f618b..628bb7c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "classnames": "2.3.2",
         "date-fns": "2.30.0",
         "lodash": "4.17.21",
+        "rc-slider": "10.2.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-redux": "8.1.0",
@@ -21259,6 +21260,41 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rc-slider": {
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.2.1.tgz",
+      "integrity": "sha512-l355C/65iV4UFp7mXq5xBTNX2/tF2g74VWiTVlTpNp+6vjE/xaHHNiQq5Af+Uu28uUiqCuH/QXs5HfADL9KJ/A==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.27.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-util": {
+      "version": "5.34.1",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.34.1.tgz",
+      "integrity": "sha512-SqiUT8Ssgh5C+hu4y887xwCrMNcxLm6ScOo8AFlWYYF3z9uNNiPpwwSjvicqOlWd79rNw1g44rnP7tz9MrO1ZQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "react-is": "^16.12.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-util/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
diff --git a/package.json b/package.json
index d520f62..e4fec65 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "classnames": "2.3.2",
     "date-fns": "2.30.0",
     "lodash": "4.17.21",
+    "rc-slider": "10.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-redux": "8.1.0",
diff --git a/src/components/AppSlider/index.test.tsx b/src/components/AppSlider/index.test.tsx
new file mode 100644
index 0000000..5bab514
--- /dev/null
+++ b/src/components/AppSlider/index.test.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import AppSlider, { appSliderDataTestIds } from '.';
+
+describe('AppSlider', () => {
+  it('renders AppSlider component', () => {
+    render(<AppSlider onValueChanged={jest.fn()} />);
+
+    const appSlider = screen.getByTestId(appSliderDataTestIds.base);
+
+    expect(appSlider).toBeVisible();
+  });
+});
diff --git a/src/components/AppSlider/index.tsx b/src/components/AppSlider/index.tsx
new file mode 100644
index 0000000..f410115
--- /dev/null
+++ b/src/components/AppSlider/index.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import Slider from 'rc-slider';
+import 'rc-slider/assets/index.css';
+
+export const appSliderDataTestIds = {
+  base: 'app-slider__base',
+};
+
+interface SliderProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  onValueChanged: (position: number) => void;
+}
+
+const AppSlider = ({ min = 1, max = 100, step = 1, onValueChanged }: SliderProps): JSX.Element => {
+  const handleOnChange = (value: number) => {
+    onValueChanged(value);
+  };
+
+  return (
+    <div className="flex w-full h-[56px] justify-center items-center" data-test-id={appSliderDataTestIds.base}>
+      <Slider
+        trackStyle={{
+          background: 'rgba(255, 255, 255, 1)',
+          height: '2px',
+          borderRadius: '12px',
+        }}
+        railStyle={{
+          height: '2px',
+          background: 'rgba(255, 255, 255, 0.18)',
+          borderRadius: '12px',
+        }}
+        handleStyle={{
+          width: '28px',
+          height: '28px',
+          background: 'white',
+          marginTop: '-12px',
+          opacity: 1,
+          borderRadius: '100px',
+          border: '0.5px solid rgba(0, 0, 0, 0.04)',
+          boxShadow:
+            '0px 3px 1px 0px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.16), 0px 3px 8px 0px rgba(0, 0, 0, 0.15)',
+        }}
+        min={min}
+        max={max}
+        step={step}
+        onChange={(value) => handleOnChange(value as number)}
+      />
+    </div>
+  );
+};
+
+export default AppSlider;