diff --git a/apps/docs/content/components/slider/colors.raw.jsx b/apps/docs/content/components/slider/colors.raw.jsx
new file mode 100644
index 0000000000..b96faeaa72
--- /dev/null
+++ b/apps/docs/content/components/slider/colors.raw.jsx
@@ -0,0 +1,22 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  const colors = ["foreground", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      {colors.map((color) => (
+        <Slider
+          key={color}
+          aria-label="Temperature"
+          className="max-w-md"
+          color={color}
+          defaultValue={0.7}
+          maxValue={1}
+          minValue={0}
+          step={0.01}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/colors.ts b/apps/docs/content/components/slider/colors.ts
index f26d3f88a5..d5bef810aa 100644
--- a/apps/docs/content/components/slider/colors.ts
+++ b/apps/docs/content/components/slider/colors.ts
@@ -1,32 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  const colors = [
-    "foreground",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger",
-  ];
-
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-md">
-      {colors.map((color) => (
-        <Slider
-          key={color}
-          color={color}
-          step={0.01}
-          maxValue={1}
-          minValue={0}
-          defaultValue={0.7}
-          aria-label="Temperature"
-          className="max-w-md"
-        />
-      ))}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/controlled-change-end.raw.jsx b/apps/docs/content/components/slider/controlled-change-end.raw.jsx
new file mode 100644
index 0000000000..53360e0bef
--- /dev/null
+++ b/apps/docs/content/components/slider/controlled-change-end.raw.jsx
@@ -0,0 +1,18 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState(25);
+
+  return (
+    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
+      <Slider
+        aria-label="Volume"
+        className="max-w-md"
+        color="secondary"
+        size="lg"
+        onChangeEnd={setValue}
+      />
+      <p className="text-default-500 font-medium text-small">Current volume: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/controlled-change-end.raw.tsx b/apps/docs/content/components/slider/controlled-change-end.raw.tsx
new file mode 100644
index 0000000000..e88a356599
--- /dev/null
+++ b/apps/docs/content/components/slider/controlled-change-end.raw.tsx
@@ -0,0 +1,22 @@
+import type {SliderValue} from "@nextui-org/react";
+
+import React from "react";
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState<SliderValue>(25);
+
+  return (
+    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
+      <Slider
+        aria-label="Volume"
+        className="max-w-md"
+        color="secondary"
+        defaultValue={70}
+        size="lg"
+        onChangeEnd={setValue}
+      />
+      <p className="text-default-500 font-medium text-small">Current volume: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/controlled-change-end.ts b/apps/docs/content/components/slider/controlled-change-end.ts
index 5206d4118a..21ef7f007b 100644
--- a/apps/docs/content/components/slider/controlled-change-end.ts
+++ b/apps/docs/content/components/slider/controlled-change-end.ts
@@ -1,41 +1,5 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState(25);
-
-  return (
-    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
-      <Slider
-        aria-label="Volume"
-        size="lg"
-        color="secondary"
-        onChangeEnd={setValue}
-        className="max-w-md"
-      />
-      <p className="text-default-500 font-medium text-small">Current volume: {value}</p>
-    </div>
-  );
-}`;
-
-const AppTs = `import {Slider, SliderValue} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState<SliderValue>(25);
-
-  return (
-    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
-      <Slider 
-        aria-label="Volume"
-        size="lg"
-        color="secondary"
-        defaultValue={70}
-        onChangeEnd={setValue}
-        className="max-w-md"
-      />
-      <p className="text-default-500 font-medium text-small">Current volume: {value}</p>
-    </div>
-  );
-}`;
+import App from "./controlled-change-end.raw.jsx?raw";
+import AppTs from "./controlled-change-end.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/controlled-range.raw.jsx b/apps/docs/content/components/slider/controlled-range.raw.jsx
new file mode 100644
index 0000000000..e5404dfc72
--- /dev/null
+++ b/apps/docs/content/components/slider/controlled-range.raw.jsx
@@ -0,0 +1,23 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState([100, 300]);
+
+  return (
+    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
+      <Slider
+        className="max-w-md"
+        formatOptions={{style: "currency", currency: "USD"}}
+        label="Select a budget"
+        maxValue={1000}
+        minValue={0}
+        step={10}
+        value={value}
+        onChange={setValue}
+      />
+      <p className="text-default-500 font-medium text-small">
+        Selected budget: {Array.isArray(value) && value.map((b) => `${b}`).join(" – ")}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/controlled-range.raw.tsx b/apps/docs/content/components/slider/controlled-range.raw.tsx
new file mode 100644
index 0000000000..267342eb21
--- /dev/null
+++ b/apps/docs/content/components/slider/controlled-range.raw.tsx
@@ -0,0 +1,26 @@
+import type {SliderValue} from "@nextui-org/react";
+
+import React from "react";
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState<SliderValue>([100, 300]);
+
+  return (
+    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
+      <Slider
+        className="max-w-md"
+        formatOptions={{style: "currency", currency: "USD"}}
+        label="Select a budget"
+        maxValue={1000}
+        minValue={0}
+        step={10}
+        value={value}
+        onChange={setValue}
+      />
+      <p className="text-default-500 font-medium text-small">
+        Selected budget: {Array.isArray(value) && value.map((b) => `$${b}`).join(" – ")}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/controlled-range.ts b/apps/docs/content/components/slider/controlled-range.ts
index 61d0bf1929..90412a80b9 100644
--- a/apps/docs/content/components/slider/controlled-range.ts
+++ b/apps/docs/content/components/slider/controlled-range.ts
@@ -1,50 +1,5 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState([100, 300]);
-
-  return (
-    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
-      <Slider 
-        label="Select a budget"
-        formatOptions={{style: "currency", currency: "USD"}}
-        step={10}
-        maxValue={1000}
-        minValue={0}
-        value={value} 
-        onChange={setValue}
-        className="max-w-md"
-      />
-      <p className="text-default-500 font-medium text-small">
-        Selected budget: {Array.isArray(value) && value.map((b) => \`$\${b}\`).join(" – ")}
-      </p>
-    </div>
-  );
-}`;
-
-const AppTs = `import {Slider, SliderValue} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState<SliderValue>([100, 300]);
-
-  return (
-    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
-      <Slider 
-        label="Select a budget"
-        formatOptions={{style: "currency", currency: "USD"}}
-        step={10}
-        maxValue={1000}
-        minValue={0}
-        value={value} 
-        onChange={setValue}
-        className="max-w-md"
-      />
-      <p className="text-default-500 font-medium text-small">
-        Selected budget: {Array.isArray(value) && value.map((b) => \`$\${b}\`).join(" – ")}
-      </p>
-    </div>
-  );
-}`;
+import App from "./controlled-range.raw.jsx?raw";
+import AppTs from "./controlled-range.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/controlled.raw.jsx b/apps/docs/content/components/slider/controlled.raw.jsx
new file mode 100644
index 0000000000..52cac72992
--- /dev/null
+++ b/apps/docs/content/components/slider/controlled.raw.jsx
@@ -0,0 +1,91 @@
+import {Slider, Button} from "@nextui-org/react";
+
+export const VolumeHighIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M18.0003 16.7503C17.8403 16.7503 17.6903 16.7003 17.5503 16.6003C17.2203 16.3503 17.1503 15.8803 17.4003 15.5503C18.9703 13.4603 18.9703 10.5403 17.4003 8.45027C17.1503 8.12027 17.2203 7.65027 17.5503 7.40027C17.8803 7.15027 18.3503 7.22027 18.6003 7.55027C20.5603 10.1703 20.5603 13.8303 18.6003 16.4503C18.4503 16.6503 18.2303 16.7503 18.0003 16.7503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.8284 19.2503C19.6684 19.2503 19.5184 19.2003 19.3784 19.1003C19.0484 18.8503 18.9784 18.3803 19.2284 18.0503C21.8984 14.4903 21.8984 9.51027 19.2284 5.95027C18.9784 5.62027 19.0484 5.15027 19.3784 4.90027C19.7084 4.65027 20.1784 4.72027 20.4284 5.05027C23.4984 9.14027 23.4984 14.8603 20.4284 18.9503C20.2884 19.1503 20.0584 19.2503 19.8284 19.2503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.02 3.78168C12.9 3.16168 11.47 3.32168 10.01 4.23168L7.09 6.06168C6.89 6.18168 6.66 6.25168 6.43 6.25168H5.5H5C2.58 6.25168 1.25 7.58168 1.25 10.0017V14.0017C1.25 16.4217 2.58 17.7517 5 17.7517H5.5H6.43C6.66 17.7517 6.89 17.8217 7.09 17.9417L10.01 19.7717C10.89 20.3217 11.75 20.5917 12.55 20.5917C13.07 20.5917 13.57 20.4717 14.02 20.2217C15.13 19.6017 15.75 18.3117 15.75 16.5917V7.41168C15.75 5.69168 15.13 4.40168 14.02 3.78168Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const VolumeLowIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M19.3284 16.7503C19.1684 16.7503 19.0184 16.7003 18.8784 16.6003C18.5484 16.3503 18.4784 15.8803 18.7284 15.5503C20.2984 13.4603 20.2984 10.5403 18.7284 8.45027C18.4784 8.12027 18.5484 7.65027 18.8784 7.40027C19.2084 7.15027 19.6784 7.22027 19.9284 7.55027C21.8984 10.1703 21.8984 13.8303 19.9284 16.4503C19.7884 16.6503 19.5584 16.7503 19.3284 16.7503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15.3481 3.78168C14.2281 3.16168 12.7981 3.32168 11.3381 4.23168L8.41813 6.06168C8.21813 6.18168 7.98813 6.25168 7.75813 6.25168H6.82812H6.32812C3.90812 6.25168 2.57812 7.58168 2.57812 10.0017V14.0017C2.57812 16.4217 3.90812 17.7517 6.32812 17.7517H6.82812H7.75813C7.98813 17.7517 8.21813 17.8217 8.41813 17.9417L11.3381 19.7717C12.2181 20.3217 13.0781 20.5917 13.8781 20.5917C14.3981 20.5917 14.8981 20.4717 15.3481 20.2217C16.4581 19.6017 17.0781 18.3117 17.0781 16.5917V7.41168C17.0781 5.69168 16.4581 4.40168 15.3481 3.78168Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const [value, setValue] = React.useState(25);
+
+  return (
+    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
+      <Slider
+        aria-label="Volume"
+        className="max-w-md"
+        color="success"
+        endContent={
+          <Button
+            isIconOnly
+            radius="full"
+            variant="light"
+            onPress={() => setValue((prev) => (prev <= 90 ? prev + 10 : 100))}
+          >
+            <VolumeHighIcon className="text-2xl" />
+          </Button>
+        }
+        size="lg"
+        startContent={
+          <Button
+            isIconOnly
+            radius="full"
+            variant="light"
+            onPress={() => setValue((prev) => (prev >= 10 ? prev - 10 : 0))}
+          >
+            <VolumeLowIcon className="text-2xl" />
+          </Button>
+        }
+        value={value}
+        onChange={setValue}
+      />
+      <p className="text-default-500 font-medium text-small">Current volume: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/controlled.raw.tsx b/apps/docs/content/components/slider/controlled.raw.tsx
new file mode 100644
index 0000000000..9f9728ea67
--- /dev/null
+++ b/apps/docs/content/components/slider/controlled.raw.tsx
@@ -0,0 +1,94 @@
+import type {SliderValue} from "@nextui-org/react";
+
+import React from "react";
+import {Slider, Button} from "@nextui-org/react";
+
+export const VolumeHighIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M18.0003 16.7503C17.8403 16.7503 17.6903 16.7003 17.5503 16.6003C17.2203 16.3503 17.1503 15.8803 17.4003 15.5503C18.9703 13.4603 18.9703 10.5403 17.4003 8.45027C17.1503 8.12027 17.2203 7.65027 17.5503 7.40027C17.8803 7.15027 18.3503 7.22027 18.6003 7.55027C20.5603 10.1703 20.5603 13.8303 18.6003 16.4503C18.4503 16.6503 18.2303 16.7503 18.0003 16.7503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.8284 19.2503C19.6684 19.2503 19.5184 19.2003 19.3784 19.1003C19.0484 18.8503 18.9784 18.3803 19.2284 18.0503C21.8984 14.4903 21.8984 9.51027 19.2284 5.95027C18.9784 5.62027 19.0484 5.15027 19.3784 4.90027C19.7084 4.65027 20.1784 4.72027 20.4284 5.05027C23.4984 9.14027 23.4984 14.8603 20.4284 18.9503C20.2884 19.1503 20.0584 19.2503 19.8284 19.2503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.02 3.78168C12.9 3.16168 11.47 3.32168 10.01 4.23168L7.09 6.06168C6.89 6.18168 6.66 6.25168 6.43 6.25168H5.5H5C2.58 6.25168 1.25 7.58168 1.25 10.0017V14.0017C1.25 16.4217 2.58 17.7517 5 17.7517H5.5H6.43C6.66 17.7517 6.89 17.8217 7.09 17.9417L10.01 19.7717C10.89 20.3217 11.75 20.5917 12.55 20.5917C13.07 20.5917 13.57 20.4717 14.02 20.2217C15.13 19.6017 15.75 18.3117 15.75 16.5917V7.41168C15.75 5.69168 15.13 4.40168 14.02 3.78168Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const VolumeLowIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M19.3284 16.7503C19.1684 16.7503 19.0184 16.7003 18.8784 16.6003C18.5484 16.3503 18.4784 15.8803 18.7284 15.5503C20.2984 13.4603 20.2984 10.5403 18.7284 8.45027C18.4784 8.12027 18.5484 7.65027 18.8784 7.40027C19.2084 7.15027 19.6784 7.22027 19.9284 7.55027C21.8984 10.1703 21.8984 13.8303 19.9284 16.4503C19.7884 16.6503 19.5584 16.7503 19.3284 16.7503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15.3481 3.78168C14.2281 3.16168 12.7981 3.32168 11.3381 4.23168L8.41813 6.06168C8.21813 6.18168 7.98813 6.25168 7.75813 6.25168H6.82812H6.32812C3.90812 6.25168 2.57812 7.58168 2.57812 10.0017V14.0017C2.57812 16.4217 3.90812 17.7517 6.32812 17.7517H6.82812H7.75813C7.98813 17.7517 8.21813 17.8217 8.41813 17.9417L11.3381 19.7717C12.2181 20.3217 13.0781 20.5917 13.8781 20.5917C14.3981 20.5917 14.8981 20.4717 15.3481 20.2217C16.4581 19.6017 17.0781 18.3117 17.0781 16.5917V7.41168C17.0781 5.69168 16.4581 4.40168 15.3481 3.78168Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const [value, setValue] = React.useState<SliderValue>(25);
+
+  return (
+    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
+      <Slider
+        aria-label="Volume"
+        className="max-w-md"
+        color="success"
+        endContent={
+          <Button
+            isIconOnly
+            radius="full"
+            variant="light"
+            onPress={() => setValue((prev) => (Number(prev) <= 90 ? Number(prev) + 10 : 100))}
+          >
+            <VolumeHighIcon className="text-2xl" />
+          </Button>
+        }
+        size="lg"
+        startContent={
+          <Button
+            isIconOnly
+            radius="full"
+            variant="light"
+            onPress={() => setValue((prev) => (Number(prev) >= 10 ? Number(prev) - 10 : 0))}
+          >
+            <VolumeLowIcon className="text-2xl" />
+          </Button>
+        }
+        value={value}
+        onChange={setValue}
+      />
+      <p className="text-default-500 font-medium text-small">Current volume: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/controlled.ts b/apps/docs/content/components/slider/controlled.ts
index 0f7e03ef4e..1f1a363363 100644
--- a/apps/docs/content/components/slider/controlled.ts
+++ b/apps/docs/content/components/slider/controlled.ts
@@ -1,139 +1,8 @@
-const VolumeHighIcon = `export const VolumeHighIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M18.0003 16.7503C17.8403 16.7503 17.6903 16.7003 17.5503 16.6003C17.2203 16.3503 17.1503 15.8803 17.4003 15.5503C18.9703 13.4603 18.9703 10.5403 17.4003 8.45027C17.1503 8.12027 17.2203 7.65027 17.5503 7.40027C17.8803 7.15027 18.3503 7.22027 18.6003 7.55027C20.5603 10.1703 20.5603 13.8303 18.6003 16.4503C18.4503 16.6503 18.2303 16.7503 18.0003 16.7503Z"
-      fill="currentColor"
-    />
-    <path
-      d="M19.8284 19.2503C19.6684 19.2503 19.5184 19.2003 19.3784 19.1003C19.0484 18.8503 18.9784 18.3803 19.2284 18.0503C21.8984 14.4903 21.8984 9.51027 19.2284 5.95027C18.9784 5.62027 19.0484 5.15027 19.3784 4.90027C19.7084 4.65027 20.1784 4.72027 20.4284 5.05027C23.4984 9.14027 23.4984 14.8603 20.4284 18.9503C20.2884 19.1503 20.0584 19.2503 19.8284 19.2503Z"
-      fill="currentColor"
-    />
-    <path
-      d="M14.02 3.78168C12.9 3.16168 11.47 3.32168 10.01 4.23168L7.09 6.06168C6.89 6.18168 6.66 6.25168 6.43 6.25168H5.5H5C2.58 6.25168 1.25 7.58168 1.25 10.0017V14.0017C1.25 16.4217 2.58 17.7517 5 17.7517H5.5H6.43C6.66 17.7517 6.89 17.8217 7.09 17.9417L10.01 19.7717C10.89 20.3217 11.75 20.5917 12.55 20.5917C13.07 20.5917 13.57 20.4717 14.02 20.2217C15.13 19.6017 15.75 18.3117 15.75 16.5917V7.41168C15.75 5.69168 15.13 4.40168 14.02 3.78168Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const VolumeLowIcon = `export const VolumeLowIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M19.3284 16.7503C19.1684 16.7503 19.0184 16.7003 18.8784 16.6003C18.5484 16.3503 18.4784 15.8803 18.7284 15.5503C20.2984 13.4603 20.2984 10.5403 18.7284 8.45027C18.4784 8.12027 18.5484 7.65027 18.8784 7.40027C19.2084 7.15027 19.6784 7.22027 19.9284 7.55027C21.8984 10.1703 21.8984 13.8303 19.9284 16.4503C19.7884 16.6503 19.5584 16.7503 19.3284 16.7503Z"
-      fill="currentColor"
-    />
-    <path
-      d="M15.3481 3.78168C14.2281 3.16168 12.7981 3.32168 11.3381 4.23168L8.41813 6.06168C8.21813 6.18168 7.98813 6.25168 7.75813 6.25168H6.82812H6.32812C3.90812 6.25168 2.57812 7.58168 2.57812 10.0017V14.0017C2.57812 16.4217 3.90812 17.7517 6.32812 17.7517H6.82812H7.75813C7.98813 17.7517 8.21813 17.8217 8.41813 17.9417L11.3381 19.7717C12.2181 20.3217 13.0781 20.5917 13.8781 20.5917C14.3981 20.5917 14.8981 20.4717 15.3481 20.2217C16.4581 19.6017 17.0781 18.3117 17.0781 16.5917V7.41168C17.0781 5.69168 16.4581 4.40168 15.3481 3.78168Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Slider, Button} from "@nextui-org/react";
-import {VolumeLowIcon} from "./VolumeLowIcon";
-import {VolumeHighIcon} from "./VolumeHighIcon";
-
-export default function App() {
-  const [value, setValue] = React.useState(25);
-
-  return (
-    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
-      <Slider
-        aria-label="Volume"
-        size="lg"
-        color="success"
-        value={value}
-        onChange={setValue}
-        startContent={
-          <Button
-            isIconOnly
-            radius="full"
-            variant="light"
-            onPress={() => setValue((prev) => prev >= 10 ? prev - 10 : 0)}
-          >
-            <VolumeLowIcon className="text-2xl" />
-          </Button>
-        }
-        endContent={
-          <Button
-            isIconOnly
-            radius="full"
-            variant="light"
-            onPress={() => setValue((prev) => prev <= 90 ? prev + 10 : 100)}
-          >
-            <VolumeHighIcon className="text-2xl" />
-          </Button>
-        }
-        className="max-w-md"
-      />
-      <p className="text-default-500 font-medium text-small">Current volume: {value}</p>
-    </div>
-  );
-}`;
-
-const AppTs = `import {Slider, Button, SliderValue} from "@nextui-org/react";
-import {VolumeLowIcon} from "./VolumeLowIcon";
-import {VolumeHighIcon} from "./VolumeHighIcon";
-
-export default function App() {
-  const [value, setValue] = React.useState<SliderValue>(25);
-
-  return (
-    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
-      <Slider 
-        aria-label="Volume"
-        size="lg"
-        color="success"
-        value={value} 
-        onChange={setValue}
-        startContent={
-          <Button
-            isIconOnly
-            variant="light"
-            radius="full"
-            onPress={() => setValue((prev) => prev >= 10 ? prev - 10 : 0)}
-          >
-            <VolumeLowIcon className="text-2xl" />
-          </Button>
-        }
-        endContent={
-          <Button
-            isIconOnly
-            variant="light"
-            radius="full"
-            onPress={() => setValue((prev) => prev <= 90 ? prev + 10 : 100)}
-          >
-            <VolumeHighIcon className="text-2xl" />
-          </Button>
-        }
-        className="max-w-md"
-      />
-      <p className="text-default-500 font-medium text-small">Current volume: {value}</p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/VolumeHighIcon.jsx": VolumeHighIcon,
-  "/VolumeLowIcon.jsx": VolumeLowIcon,
 };
 
 const reactTs = {
diff --git a/apps/docs/content/components/slider/custom-styles.raw.jsx b/apps/docs/content/components/slider/custom-styles.raw.jsx
new file mode 100644
index 0000000000..0090efa5d7
--- /dev/null
+++ b/apps/docs/content/components/slider/custom-styles.raw.jsx
@@ -0,0 +1,47 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      classNames={{
+        base: "max-w-md",
+        filler: "bg-gradient-to-r from-primary-500 to-secondary-400",
+        labelWrapper: "mb-2",
+        label: "font-medium text-default-700 text-medium",
+        value: "font-medium text-default-500 text-small",
+        thumb: [
+          "transition-size",
+          "bg-gradient-to-r from-secondary-400 to-primary-500",
+          "data-[dragging=true]:shadow-lg data-[dragging=true]:shadow-black/20",
+          "data-[dragging=true]:w-7 data-[dragging=true]:h-7 data-[dragging=true]:after:h-6 data-[dragging=true]:after:w-6",
+        ],
+        step: "data-[in-range=true]:bg-black/30 dark:data-[in-range=true]:bg-white/50",
+      }}
+      defaultValue={[0, 800]}
+      disableThumbScale={true}
+      formatOptions={{style: "currency", currency: "USD"}}
+      label="Price Range"
+      maxValue={1000}
+      minValue={0}
+      showOutline={true}
+      showSteps={true}
+      showTooltip={true}
+      step={100}
+      tooltipProps={{
+        offset: 10,
+        placement: "bottom",
+        classNames: {
+          base: [
+            // arrow color
+            "before:bg-gradient-to-r before:from-secondary-400 before:to-primary-500",
+          ],
+          content: [
+            "py-2 shadow-xl",
+            "text-white bg-gradient-to-r from-secondary-400 to-primary-500",
+          ],
+        },
+      }}
+      tooltipValueFormatOptions={{style: "currency", currency: "USD", maximumFractionDigits: 0}}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/custom-styles.ts b/apps/docs/content/components/slider/custom-styles.ts
index 94269cc8bc..da3ea9093a 100644
--- a/apps/docs/content/components/slider/custom-styles.ts
+++ b/apps/docs/content/components/slider/custom-styles.ts
@@ -1,50 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Price Range"
-      step={100} 
-      maxValue={1000} 
-      minValue={0} 
-      defaultValue={[0, 800]}
-      showSteps={true}
-      showTooltip={true}
-      showOutline={true}
-      disableThumbScale={true}
-      formatOptions={{style: "currency", currency: "USD"}}
-      tooltipValueFormatOptions={{style: "currency", currency: "USD", maximumFractionDigits: 0}}
-      classNames={{
-        base: "max-w-md",
-        filler: "bg-gradient-to-r from-primary-500 to-secondary-400",
-        labelWrapper: "mb-2",
-        label: "font-medium text-default-700 text-medium",
-        value: "font-medium text-default-500 text-small",
-        thumb: [
-          "transition-size",
-          "bg-gradient-to-r from-secondary-400 to-primary-500",
-          "data-[dragging=true]:shadow-lg data-[dragging=true]:shadow-black/20",
-          "data-[dragging=true]:w-7 data-[dragging=true]:h-7 data-[dragging=true]:after:h-6 data-[dragging=true]:after:w-6"
-        ],
-        step: "data-[in-range=true]:bg-black/30 dark:data-[in-range=true]:bg-white/50"
-      }}
-      tooltipProps={{
-        offset: 10,
-        placement: "bottom",
-        classNames: {
-          base: [
-            // arrow color
-            "before:bg-gradient-to-r before:from-secondary-400 before:to-primary-500",
-          ],
-          content: [
-            "py-2 shadow-xl",
-            "text-white bg-gradient-to-r from-secondary-400 to-primary-500",
-          ],
-        },
-      }}
-    />
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/disable-thumb-scale.raw.jsx b/apps/docs/content/components/slider/disable-thumb-scale.raw.jsx
new file mode 100644
index 0000000000..49b2641f17
--- /dev/null
+++ b/apps/docs/content/components/slider/disable-thumb-scale.raw.jsx
@@ -0,0 +1,41 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        color="secondary"
+        defaultValue={0.2}
+        disableThumbScale={true}
+        maxValue={1}
+        minValue={0}
+        size="sm"
+        step={0.01}
+      />
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        color="secondary"
+        defaultValue={0.4}
+        disableThumbScale={true}
+        maxValue={1}
+        minValue={0}
+        size="md"
+        step={0.01}
+      />
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        color="secondary"
+        defaultValue={0.6}
+        disableThumbScale={true}
+        maxValue={1}
+        minValue={0}
+        size="lg"
+        step={0.01}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/disable-thumb-scale.ts b/apps/docs/content/components/slider/disable-thumb-scale.ts
index 681e6fa099..a6d8994a9a 100644
--- a/apps/docs/content/components/slider/disable-thumb-scale.ts
+++ b/apps/docs/content/components/slider/disable-thumb-scale.ts
@@ -1,44 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-md">
-      <Slider   
-        size="sm"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        color="secondary"
-        disableThumbScale={true}
-        aria-label="Temperature"
-        defaultValue={0.2}
-        className="max-w-md" 
-      />
-      <Slider   
-        size="md"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        color="secondary"
-        disableThumbScale={true}
-        aria-label="Temperature"
-        defaultValue={0.4}
-        className="max-w-md" 
-      />
-      <Slider   
-        size="lg"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        color="secondary"
-        disableThumbScale={true}
-        aria-label="Temperature"
-        defaultValue={0.6}
-        className="max-w-md" 
-      />
-    </div> 
-  );
-}`;
+import App from "./disable-thumb-scale.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/disabled.raw.jsx b/apps/docs/content/components/slider/disabled.raw.jsx
new file mode 100644
index 0000000000..f805a3ade7
--- /dev/null
+++ b/apps/docs/content/components/slider/disabled.raw.jsx
@@ -0,0 +1,15 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      isDisabled
+      className="max-w-md"
+      defaultValue={0.6}
+      label="Temperature"
+      maxValue={1}
+      minValue={0}
+      step={0.01}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/disabled.ts b/apps/docs/content/components/slider/disabled.ts
index 07ac82bc41..1a215cc91f 100644
--- a/apps/docs/content/components/slider/disabled.ts
+++ b/apps/docs/content/components/slider/disabled.ts
@@ -1,18 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      isDisabled 
-      label="Temperature" 
-      step={0.01} 
-      maxValue={1} 
-      minValue={0} 
-      defaultValue={0.6}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/fill-offset.raw.jsx b/apps/docs/content/components/slider/fill-offset.raw.jsx
new file mode 100644
index 0000000000..3f432829fc
--- /dev/null
+++ b/apps/docs/content/components/slider/fill-offset.raw.jsx
@@ -0,0 +1,18 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      className="max-w-md"
+      color="warning"
+      defaultValue={1.5}
+      fillOffset={0}
+      formatOptions={{signDisplay: "always"}}
+      label="Exposure"
+      maxValue={5}
+      minValue={-5}
+      size="sm"
+      step={0.01}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/fill-offset.ts b/apps/docs/content/components/slider/fill-offset.ts
index e293a6fa98..3a5faaa7da 100644
--- a/apps/docs/content/components/slider/fill-offset.ts
+++ b/apps/docs/content/components/slider/fill-offset.ts
@@ -1,21 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Exposure" 
-      size="sm"
-      color="warning"
-      step={0.01} 
-      maxValue={5} 
-      minValue={-5} 
-      fillOffset={0}
-      defaultValue={1.5}
-      className="max-w-md"
-      formatOptions={{signDisplay: 'always'}}
-    />
-  );
-}`;
+import App from "./fill-offset.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/get-value.raw.jsx b/apps/docs/content/components/slider/get-value.raw.jsx
new file mode 100644
index 0000000000..9fb2965c6d
--- /dev/null
+++ b/apps/docs/content/components/slider/get-value.raw.jsx
@@ -0,0 +1,13 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      className="max-w-md"
+      getValue={(donuts) => `${donuts} of 60 Donuts`}
+      label="Donuts to buy"
+      maxValue={60}
+      size="sm"
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/get-value.ts b/apps/docs/content/components/slider/get-value.ts
index 58a100dbcd..b44c91bd81 100644
--- a/apps/docs/content/components/slider/get-value.ts
+++ b/apps/docs/content/components/slider/get-value.ts
@@ -1,16 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Donuts to buy"
-      size="sm"
-      maxValue={60}
-      getValue={(donuts) => \`\${donuts} of 60 Donuts\`}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./get-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/hide-thumb.raw.jsx b/apps/docs/content/components/slider/hide-thumb.raw.jsx
new file mode 100644
index 0000000000..8157e09ed9
--- /dev/null
+++ b/apps/docs/content/components/slider/hide-thumb.raw.jsx
@@ -0,0 +1,13 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      aria-label="Player progress"
+      className="max-w-md"
+      color="foreground"
+      defaultValue={20}
+      hideThumb={true}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/hide-thumb.ts b/apps/docs/content/components/slider/hide-thumb.ts
index 4be475c9dd..bd5db5b627 100644
--- a/apps/docs/content/components/slider/hide-thumb.ts
+++ b/apps/docs/content/components/slider/hide-thumb.ts
@@ -1,16 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      aria-label="Player progress" 
-      color="foreground"
-      hideThumb={true}
-      defaultValue={20}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./hide-thumb.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/hide-value.raw.jsx b/apps/docs/content/components/slider/hide-value.raw.jsx
new file mode 100644
index 0000000000..df98a823ab
--- /dev/null
+++ b/apps/docs/content/components/slider/hide-value.raw.jsx
@@ -0,0 +1,16 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      className="max-w-md"
+      color="danger"
+      defaultValue={0.4}
+      hideValue={true}
+      label="Temperature"
+      maxValue={1}
+      minValue={0}
+      step={0.01}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/hide-value.ts b/apps/docs/content/components/slider/hide-value.ts
index 54d1607025..cfd8be7222 100644
--- a/apps/docs/content/components/slider/hide-value.ts
+++ b/apps/docs/content/components/slider/hide-value.ts
@@ -1,19 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Temperature" 
-      color="danger"
-      hideValue={true}
-      step={0.01} 
-      maxValue={1} 
-      minValue={0} 
-      defaultValue={0.4}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./hide-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/marks.raw.jsx b/apps/docs/content/components/slider/marks.raw.jsx
new file mode 100644
index 0000000000..ff41ef28d2
--- /dev/null
+++ b/apps/docs/content/components/slider/marks.raw.jsx
@@ -0,0 +1,28 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      className="max-w-md"
+      color="foreground"
+      defaultValue={20}
+      label="Select a value"
+      marks={[
+        {
+          value: 20,
+          label: "20%",
+        },
+        {
+          value: 50,
+          label: "50%",
+        },
+        {
+          value: 80,
+          label: "80%",
+        },
+      ]}
+      size="sm"
+      step={10}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/marks.ts b/apps/docs/content/components/slider/marks.ts
index 07c7ac65cc..cdccdb9cea 100644
--- a/apps/docs/content/components/slider/marks.ts
+++ b/apps/docs/content/components/slider/marks.ts
@@ -1,31 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Select a value" 
-      color="foreground"
-      size="sm"
-      step={10} 
-      marks={[
-        {
-          value: 20,
-          label: "20%",
-        },
-        {
-          value: 50,
-          label: "50%",
-        },
-        {
-          value: 80,
-          label: "80%",
-        },
-      ]}
-      defaultValue={20}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./marks.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/outline.raw.jsx b/apps/docs/content/components/slider/outline.raw.jsx
new file mode 100644
index 0000000000..67d251a4b7
--- /dev/null
+++ b/apps/docs/content/components/slider/outline.raw.jsx
@@ -0,0 +1,41 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        color="foreground"
+        defaultValue={0.2}
+        maxValue={1}
+        minValue={0}
+        showOutline={true}
+        size="sm"
+        step={0.01}
+      />
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        color="foreground"
+        defaultValue={0.4}
+        maxValue={1}
+        minValue={0}
+        showOutline={true}
+        size="md"
+        step={0.01}
+      />
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        color="foreground"
+        defaultValue={0.6}
+        maxValue={1}
+        minValue={0}
+        showOutline={true}
+        size="lg"
+        step={0.01}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/outline.ts b/apps/docs/content/components/slider/outline.ts
index ec94e797c3..08038eb9c4 100644
--- a/apps/docs/content/components/slider/outline.ts
+++ b/apps/docs/content/components/slider/outline.ts
@@ -1,44 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-md">
-      <Slider   
-        size="sm"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        color="foreground"
-        showOutline={true}
-        aria-label="Temperature"
-        defaultValue={0.2}
-        className="max-w-md" 
-      />
-      <Slider   
-        size="md"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        color="foreground"
-        showOutline={true}
-        aria-label="Temperature"
-        defaultValue={0.4}
-        className="max-w-md" 
-      />
-      <Slider   
-        size="lg"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        color="foreground"
-        showOutline={true}
-        aria-label="Temperature"
-        defaultValue={0.6}
-        className="max-w-md" 
-      />
-    </div> 
-  );
-}`;
+import App from "./outline.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/radius.raw.jsx b/apps/docs/content/components/slider/radius.raw.jsx
new file mode 100644
index 0000000000..181343ac11
--- /dev/null
+++ b/apps/docs/content/components/slider/radius.raw.jsx
@@ -0,0 +1,22 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  const radius = ["full", "lg", "md", "sm", "none"];
+
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      {radius.map((r) => (
+        <Slider
+          key={r}
+          aria-label="Temperature"
+          className="max-w-md"
+          defaultValue={0.7}
+          maxValue={1}
+          minValue={0}
+          radius={r}
+          step={0.01}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/radius.ts b/apps/docs/content/components/slider/radius.ts
index 6fb5696ad1..7b78db1ce0 100644
--- a/apps/docs/content/components/slider/radius.ts
+++ b/apps/docs/content/components/slider/radius.ts
@@ -1,31 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  const radius = [
-    "full",
-    "lg",
-    "md",
-    "sm",
-    "none",
-  ];
-
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-md">
-      {radius.map((r) => (
-        <Slider
-          key={r}
-          radius={r}
-          step={0.01}
-          maxValue={1}
-          minValue={0}
-          defaultValue={0.7}
-          aria-label="Temperature"
-          className="max-w-md"
-        />
-      ))}
-    </div>
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/range.raw.jsx b/apps/docs/content/components/slider/range.raw.jsx
new file mode 100644
index 0000000000..9f733fdbb0
--- /dev/null
+++ b/apps/docs/content/components/slider/range.raw.jsx
@@ -0,0 +1,15 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      className="max-w-md"
+      defaultValue={[100, 500]}
+      formatOptions={{style: "currency", currency: "USD"}}
+      label="Price Range"
+      maxValue={1000}
+      minValue={0}
+      step={50}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/range.ts b/apps/docs/content/components/slider/range.ts
index 9b958ceee5..90e4b05194 100644
--- a/apps/docs/content/components/slider/range.ts
+++ b/apps/docs/content/components/slider/range.ts
@@ -1,18 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Price Range"
-      step={50} 
-      minValue={0} 
-      maxValue={1000} 
-      defaultValue={[100, 500]} 
-      formatOptions={{style: "currency", currency: "USD"}}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./range.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/render-label.raw.jsx b/apps/docs/content/components/slider/render-label.raw.jsx
new file mode 100644
index 0000000000..2af183ce22
--- /dev/null
+++ b/apps/docs/content/components/slider/render-label.raw.jsx
@@ -0,0 +1,84 @@
+import {Slider, Tooltip} from "@nextui-org/react";
+
+export const InfoIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12 8V13"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M11.9945 16H12.0035"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Slider
+      classNames={{
+        base: "max-w-md gap-3",
+        filler: "bg-gradient-to-r from-pink-300 to-cyan-300 dark:from-pink-600 dark:to-cyan-800",
+      }}
+      defaultValue={[100, 300]}
+      formatOptions={{style: "currency", currency: "USD"}}
+      label="Price Range"
+      maxValue={1000}
+      renderLabel={({children, ...props}) => (
+        <label {...props} className="text-medium flex gap-2 items-center">
+          {children}
+          <Tooltip
+            className="w-[200px] px-1.5 text-tiny text-default-600 rounded-small"
+            content="The price range you want to search for."
+            placement="right"
+          >
+            <span className="transition-opacity opacity-80 hover:opacity-100">
+              <InfoIcon />
+            </span>
+          </Tooltip>
+        </label>
+      )}
+      renderThumb={({index, ...props}) => (
+        <div
+          {...props}
+          className="group p-1 top-1/2 bg-background border-small border-default-200 dark:border-default-400/50 shadow-medium rounded-full cursor-grab data-[dragging=true]:cursor-grabbing"
+        >
+          <span
+            className={cn(
+              "transition-transform bg-gradient-to-br shadow-small rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80",
+              index === 0
+                ? "from-pink-200 to-pink-500 dark:from-pink-400 dark:to-pink-600" // first thumb
+                : "from-cyan-200 to-cyan-600 dark:from-cyan-600 dark:to-cyan-800", // second thumb
+            )}
+          />
+        </div>
+      )}
+      size="lg"
+      step={10}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/render-label.ts b/apps/docs/content/components/slider/render-label.ts
index 5248574a7f..f4fc289c53 100644
--- a/apps/docs/content/components/slider/render-label.ts
+++ b/apps/docs/content/components/slider/render-label.ts
@@ -1,91 +1,7 @@
-const InfoIcon = `export const InfoIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M12 8V13"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M11.9945 16H12.0035"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-  </svg>
-);
-`;
-
-const App = `import {Slider, Tooltip} from "@nextui-org/react";
-import {InfoIcon} from "./InfoIcon";
-
-export default function App() {
-  return (
-    <Slider
-      size="lg"
-      label="Price Range"
-      maxValue={1000}
-      step={10}
-      defaultValue={[100, 300]}
-      formatOptions={{style: "currency", currency: "USD"}}
-      classNames={{
-        base: "max-w-md gap-3",
-        filler: "bg-gradient-to-r from-pink-300 to-cyan-300 dark:from-pink-600 dark:to-cyan-800",
-      }}
-      renderLabel={({children, ...props}) => (
-        <label {...props} className="text-medium flex gap-2 items-center">
-          {children}
-          <Tooltip
-            className="w-[200px] px-1.5 text-tiny text-default-600 rounded-small"
-            content="The price range you want to search for."
-            placement="right"
-          >
-            <span className="transition-opacity opacity-80 hover:opacity-100">
-              <InfoIcon />
-            </span>
-          </Tooltip>
-        </label>
-      )}
-      renderThumb={({index, ...props}) => (
-        <div
-          {...props}
-          className="group p-1 top-1/2 bg-background border-small border-default-200 dark:border-default-400/50 shadow-medium rounded-full cursor-grab data-[dragging=true]:cursor-grabbing"
-        >
-          <span
-            className={cn(
-              "transition-transform bg-gradient-to-br shadow-small rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80",
-              index === 0
-                ? "from-pink-200 to-pink-500 dark:from-pink-400 dark:to-pink-600" // first thumb
-                : "from-cyan-200 to-cyan-600 dark:from-cyan-600 dark:to-cyan-800", // second thumb
-            )}
-          />
-        </div>
-      )}
-    />
-  );
-}`;
+import App from "./render-label.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/InfoIcon.jsx": InfoIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/slider/render-range-thumb.raw.jsx b/apps/docs/content/components/slider/render-range-thumb.raw.jsx
new file mode 100644
index 0000000000..c9b831be31
--- /dev/null
+++ b/apps/docs/content/components/slider/render-range-thumb.raw.jsx
@@ -0,0 +1,33 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      classNames={{
+        base: "max-w-md gap-3",
+        filler: "bg-gradient-to-r from-pink-300 to-cyan-300 dark:from-pink-600 dark:to-cyan-800",
+      }}
+      defaultValue={[100, 300]}
+      formatOptions={{style: "currency", currency: "USD"}}
+      label="Price Range"
+      maxValue={1000}
+      renderThumb={({index, ...props}) => (
+        <div
+          {...props}
+          className="group p-1 top-1/2 bg-background border-small border-default-200 dark:border-default-400/50 shadow-medium rounded-full cursor-grab data-[dragging=true]:cursor-grabbing"
+        >
+          <span
+            className={cn(
+              "transition-transform bg-gradient-to-br shadow-small rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80",
+              index === 0
+                ? "from-pink-200 to-pink-500 dark:from-pink-400 dark:to-pink-600" // first thumb
+                : "from-cyan-200 to-cyan-600 dark:from-cyan-600 dark:to-cyan-800", // second thumb
+            )}
+          />
+        </div>
+      )}
+      size="lg"
+      step={10}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/render-range-thumb.ts b/apps/docs/content/components/slider/render-range-thumb.ts
index 8f212229ca..6745f61592 100644
--- a/apps/docs/content/components/slider/render-range-thumb.ts
+++ b/apps/docs/content/components/slider/render-range-thumb.ts
@@ -1,36 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider
-      size="lg"
-      label="Price Range"
-      maxValue={1000}
-      step={10}
-      defaultValue={[100, 300]}
-      formatOptions={{style: "currency", currency: "USD"}}
-      classNames={{
-        base: "max-w-md gap-3",
-        filler: "bg-gradient-to-r from-pink-300 to-cyan-300 dark:from-pink-600 dark:to-cyan-800",
-      }}
-      renderThumb={({index, ...props}) => (
-        <div
-          {...props}
-          className="group p-1 top-1/2 bg-background border-small border-default-200 dark:border-default-400/50 shadow-medium rounded-full cursor-grab data-[dragging=true]:cursor-grabbing"
-        >
-          <span
-            className={cn(
-              "transition-transform bg-gradient-to-br shadow-small rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80",
-              index === 0
-                ? "from-pink-200 to-pink-500 dark:from-pink-400 dark:to-pink-600" // first thumb
-                : "from-cyan-200 to-cyan-600 dark:from-cyan-600 dark:to-cyan-800", // second thumb
-            )}
-          />
-        </div>
-      )}
-    />
-  );
-}`;
+import App from "./render-range-thumb.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/render-thumb.raw.jsx b/apps/docs/content/components/slider/render-thumb.raw.jsx
new file mode 100644
index 0000000000..29657194a5
--- /dev/null
+++ b/apps/docs/content/components/slider/render-thumb.raw.jsx
@@ -0,0 +1,24 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      classNames={{
+        base: "max-w-md gap-3",
+        track: "border-s-secondary-100",
+        filler: "bg-gradient-to-r from-secondary-100 to-secondary-500",
+      }}
+      defaultValue={60}
+      label="Select brightness"
+      renderThumb={(props) => (
+        <div
+          {...props}
+          className="group p-1 top-1/2 bg-background border-small border-default-200 dark:border-default-400/50 shadow-medium rounded-full cursor-grab data-[dragging=true]:cursor-grabbing"
+        >
+          <span className="transition-transform bg-gradient-to-br shadow-small from-secondary-100 to-secondary-500 rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80" />
+        </div>
+      )}
+      size="sm"
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/render-thumb.ts b/apps/docs/content/components/slider/render-thumb.ts
index 3a020ce676..0198aaa4a1 100644
--- a/apps/docs/content/components/slider/render-thumb.ts
+++ b/apps/docs/content/components/slider/render-thumb.ts
@@ -1,27 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      size="sm"
-      label="Select brightness"
-      defaultValue={60}
-      classNames={{
-        base: "max-w-md gap-3",
-        track: "border-s-secondary-100",
-        filler: "bg-gradient-to-r from-secondary-100 to-secondary-500"
-      }}
-      renderThumb={(props) => (
-        <div
-          {...props}
-          className="group p-1 top-1/2 bg-background border-small border-default-200 dark:border-default-400/50 shadow-medium rounded-full cursor-grab data-[dragging=true]:cursor-grabbing"
-        >
-          <span className="transition-transform bg-gradient-to-br shadow-small from-secondary-100 to-secondary-500 rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80" />
-        </div>
-      )}
-    />
-  );
-}`;
+import App from "./render-thumb.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/render-value.raw.jsx b/apps/docs/content/components/slider/render-value.raw.jsx
new file mode 100644
index 0000000000..4b548d15a4
--- /dev/null
+++ b/apps/docs/content/components/slider/render-value.raw.jsx
@@ -0,0 +1,58 @@
+import {Slider, Tooltip} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState(0.2);
+  const [inputValue, setInputValue] = React.useState("0.2");
+
+  const handleChange = (value) => {
+    if (isNaN(Number(value))) return;
+
+    setValue(value);
+    setInputValue(value.toString());
+  };
+
+  return (
+    <Slider
+      classNames={{
+        base: "max-w-md",
+        label: "text-medium",
+      }}
+      color="foreground"
+      label="Temperature"
+      maxValue={1}
+      minValue={0}
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      renderValue={({children, ...props}) => (
+        <output {...props}>
+          <Tooltip
+            className="text-tiny text-default-500 rounded-md"
+            content="Press Enter to confirm"
+            placement="left"
+          >
+            <input
+              aria-label="Temperature value"
+              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-none transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
+              type="text"
+              value={inputValue}
+              onChange={(e) => {
+                const v = e.target.value;
+
+                setInputValue(v);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !isNaN(Number(inputValue))) {
+                  setValue(Number(inputValue));
+                }
+              }}
+            />
+          </Tooltip>
+        </output>
+      )}
+      size="sm"
+      // we extract the default children to render the input
+      step={0.01}
+      value={value}
+      onChange={handleChange}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/render-value.raw.tsx b/apps/docs/content/components/slider/render-value.raw.tsx
new file mode 100644
index 0000000000..a51b665be9
--- /dev/null
+++ b/apps/docs/content/components/slider/render-value.raw.tsx
@@ -0,0 +1,61 @@
+import type {SliderValue} from "@nextui-org/react";
+
+import React from "react";
+import {Tooltip, Slider} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState<SliderValue>(0.2);
+  const [inputValue, setInputValue] = React.useState<string>("0.2");
+
+  const handleChange = (value: SliderValue) => {
+    if (isNaN(Number(value))) return;
+
+    setValue(value);
+    setInputValue(value.toString());
+  };
+
+  return (
+    <Slider
+      classNames={{
+        base: "max-w-md",
+        label: "text-medium",
+      }}
+      color="foreground"
+      label="Temperature"
+      maxValue={1}
+      minValue={0}
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      renderValue={({children, ...props}) => (
+        <output {...props}>
+          <Tooltip
+            className="text-tiny text-default-500 rounded-md"
+            content="Press Enter to confirm"
+            placement="left"
+          >
+            <input
+              aria-label="Temperature value"
+              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-none transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
+              type="text"
+              value={inputValue}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                const v = e.target.value;
+
+                setInputValue(v);
+              }}
+              onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                if (e.key === "Enter" && !isNaN(Number(inputValue))) {
+                  setValue(Number(inputValue));
+                }
+              }}
+            />
+          </Tooltip>
+        </output>
+      )}
+      size="sm"
+      step={0.01}
+      // we extract the default children to render the input
+      value={value}
+      onChange={handleChange}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/render-value.ts b/apps/docs/content/components/slider/render-value.ts
index 09da36972b..ab16e1fc22 100644
--- a/apps/docs/content/components/slider/render-value.ts
+++ b/apps/docs/content/components/slider/render-value.ts
@@ -1,118 +1,5 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState(0.2);
-  const [inputValue, setInputValue] = React.useState("0.2");
-
-  const handleChange = (value) => {
-    if (isNaN(Number(value))) return;
-
-    setValue(value);
-    setInputValue(value.toString());
-  };
-
-  return (
-    <Slider 
-      label="Temperature" 
-      size="sm"
-      step={0.01} 
-      maxValue={1} 
-      minValue={0} 
-      color="foreground"
-      classNames={{
-        base: "max-w-md",
-        label: "text-medium",
-      }}
-      // we extract the default children to render the input
-      renderValue={({children, ...props}) => (
-        <output {...props}>
-          <Tooltip
-            className="text-tiny text-default-500 rounded-md"
-            content="Press Enter to confirm"
-            placement="left"
-          >
-            <input
-              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-none transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
-              type="text"
-              aria-label="Temperature value"
-              value={inputValue}
-              onChange={(e) => {
-                const v = e.target.value;
-
-                setInputValue(v);
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && !isNaN(Number(inputValue))) {
-                  setValue(Number(inputValue));
-                }
-              }}
-            />
-          </Tooltip>
-        </output>
-      )}
-      value={value}
-      onChange={handleChange}
-    />
-  );
-}`;
-
-const AppTs = `import {Slider, SliderValue} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState<SliderValue>(0.2);
-  const [inputValue, setInputValue] = React.useState<string>("0.2");
-
-  const handleChange = (value: SliderValue) => {
-    if (isNaN(Number(value))) return;
-
-    setValue(value);
-    setInputValue(value.toString());
-  };
-
-  return (
-    <Slider 
-      label="Temperature" 
-      size="sm"
-      step={0.01} 
-      maxValue={1} 
-      minValue={0} 
-      color="foreground"
-      classNames={{
-        base: "max-w-md",
-        label: "text-medium",
-      }}
-      // we extract the default children to render the input
-      renderValue={({children, ...props}) => (
-        <output {...props}>
-          <Tooltip
-            className="text-tiny text-default-500 rounded-md"
-            content="Press Enter to confirm"
-            placement="left"
-          >
-            <input
-              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-none transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
-              type="text"
-              aria-label="Temperature value"
-              value={inputValue}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                const v = e.target.value;
-
-                setInputValue(v);
-              }}
-              onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
-                if (e.key === "Enter" && !isNaN(Number(inputValue))) {
-                  setValue(Number(inputValue));
-                }
-              }}
-            />
-          </Tooltip>
-        </output>
-      )}
-      value={value}
-      onChange={handleChange}
-    />
-  );
-}`;
+import App from "./render-value.raw.jsx?raw";
+import AppTs from "./render-value.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/sizes.raw.jsx b/apps/docs/content/components/slider/sizes.raw.jsx
new file mode 100644
index 0000000000..26693981b1
--- /dev/null
+++ b/apps/docs/content/components/slider/sizes.raw.jsx
@@ -0,0 +1,35 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        defaultValue={0.2}
+        maxValue={1}
+        minValue={0}
+        size="sm"
+        step={0.01}
+      />
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        defaultValue={0.4}
+        maxValue={1}
+        minValue={0}
+        size="md"
+        step={0.01}
+      />
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        defaultValue={0.6}
+        maxValue={1}
+        minValue={0}
+        size="lg"
+        step={0.01}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/sizes.ts b/apps/docs/content/components/slider/sizes.ts
index 83741c655d..85a2f5b30b 100644
--- a/apps/docs/content/components/slider/sizes.ts
+++ b/apps/docs/content/components/slider/sizes.ts
@@ -1,38 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-md">
-      <Slider   
-        size="sm"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        aria-label="Temperature"
-        defaultValue={0.2}
-        className="max-w-md" 
-      />
-      <Slider   
-        size="md"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        aria-label="Temperature"
-        defaultValue={0.4}
-        className="max-w-md" 
-      />
-      <Slider   
-        size="lg"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        aria-label="Temperature"
-        defaultValue={0.6}
-        className="max-w-md" 
-      />
-    </div> 
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/start-end-content.raw.jsx b/apps/docs/content/components/slider/start-end-content.raw.jsx
new file mode 100644
index 0000000000..1b9172bdda
--- /dev/null
+++ b/apps/docs/content/components/slider/start-end-content.raw.jsx
@@ -0,0 +1,67 @@
+import {Slider} from "@nextui-org/react";
+
+export const VolumeHighIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M18.0003 16.7503C17.8403 16.7503 17.6903 16.7003 17.5503 16.6003C17.2203 16.3503 17.1503 15.8803 17.4003 15.5503C18.9703 13.4603 18.9703 10.5403 17.4003 8.45027C17.1503 8.12027 17.2203 7.65027 17.5503 7.40027C17.8803 7.15027 18.3503 7.22027 18.6003 7.55027C20.5603 10.1703 20.5603 13.8303 18.6003 16.4503C18.4503 16.6503 18.2303 16.7503 18.0003 16.7503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.8284 19.2503C19.6684 19.2503 19.5184 19.2003 19.3784 19.1003C19.0484 18.8503 18.9784 18.3803 19.2284 18.0503C21.8984 14.4903 21.8984 9.51027 19.2284 5.95027C18.9784 5.62027 19.0484 5.15027 19.3784 4.90027C19.7084 4.65027 20.1784 4.72027 20.4284 5.05027C23.4984 9.14027 23.4984 14.8603 20.4284 18.9503C20.2884 19.1503 20.0584 19.2503 19.8284 19.2503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.02 3.78168C12.9 3.16168 11.47 3.32168 10.01 4.23168L7.09 6.06168C6.89 6.18168 6.66 6.25168 6.43 6.25168H5.5H5C2.58 6.25168 1.25 7.58168 1.25 10.0017V14.0017C1.25 16.4217 2.58 17.7517 5 17.7517H5.5H6.43C6.66 17.7517 6.89 17.8217 7.09 17.9417L10.01 19.7717C10.89 20.3217 11.75 20.5917 12.55 20.5917C13.07 20.5917 13.57 20.4717 14.02 20.2217C15.13 19.6017 15.75 18.3117 15.75 16.5917V7.41168C15.75 5.69168 15.13 4.40168 14.02 3.78168Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const VolumeLowIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M19.3284 16.7503C19.1684 16.7503 19.0184 16.7003 18.8784 16.6003C18.5484 16.3503 18.4784 15.8803 18.7284 15.5503C20.2984 13.4603 20.2984 10.5403 18.7284 8.45027C18.4784 8.12027 18.5484 7.65027 18.8784 7.40027C19.2084 7.15027 19.6784 7.22027 19.9284 7.55027C21.8984 10.1703 21.8984 13.8303 19.9284 16.4503C19.7884 16.6503 19.5584 16.7503 19.3284 16.7503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15.3481 3.78168C14.2281 3.16168 12.7981 3.32168 11.3381 4.23168L8.41813 6.06168C8.21813 6.18168 7.98813 6.25168 7.75813 6.25168H6.82812H6.32812C3.90812 6.25168 2.57812 7.58168 2.57812 10.0017V14.0017C2.57812 16.4217 3.90812 17.7517 6.32812 17.7517H6.82812H7.75813C7.98813 17.7517 8.21813 17.8217 8.41813 17.9417L11.3381 19.7717C12.2181 20.3217 13.0781 20.5917 13.8781 20.5917C14.3981 20.5917 14.8981 20.4717 15.3481 20.2217C16.4581 19.6017 17.0781 18.3117 17.0781 16.5917V7.41168C17.0781 5.69168 16.4581 4.40168 15.3481 3.78168Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Slider
+      aria-label="Volume"
+      className="max-w-md"
+      color="success"
+      defaultValue={40}
+      endContent={<VolumeHighIcon className="text-2xl" />}
+      size="lg"
+      startContent={<VolumeLowIcon className="text-2xl" />}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/start-end-content.ts b/apps/docs/content/components/slider/start-end-content.ts
index f478eea061..e99c7e5997 100644
--- a/apps/docs/content/components/slider/start-end-content.ts
+++ b/apps/docs/content/components/slider/start-end-content.ts
@@ -1,73 +1,7 @@
-const VolumeHighIcon = `export const VolumeHighIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M18.0003 16.7503C17.8403 16.7503 17.6903 16.7003 17.5503 16.6003C17.2203 16.3503 17.1503 15.8803 17.4003 15.5503C18.9703 13.4603 18.9703 10.5403 17.4003 8.45027C17.1503 8.12027 17.2203 7.65027 17.5503 7.40027C17.8803 7.15027 18.3503 7.22027 18.6003 7.55027C20.5603 10.1703 20.5603 13.8303 18.6003 16.4503C18.4503 16.6503 18.2303 16.7503 18.0003 16.7503Z"
-      fill="currentColor"
-    />
-    <path
-      d="M19.8284 19.2503C19.6684 19.2503 19.5184 19.2003 19.3784 19.1003C19.0484 18.8503 18.9784 18.3803 19.2284 18.0503C21.8984 14.4903 21.8984 9.51027 19.2284 5.95027C18.9784 5.62027 19.0484 5.15027 19.3784 4.90027C19.7084 4.65027 20.1784 4.72027 20.4284 5.05027C23.4984 9.14027 23.4984 14.8603 20.4284 18.9503C20.2884 19.1503 20.0584 19.2503 19.8284 19.2503Z"
-      fill="currentColor"
-    />
-    <path
-      d="M14.02 3.78168C12.9 3.16168 11.47 3.32168 10.01 4.23168L7.09 6.06168C6.89 6.18168 6.66 6.25168 6.43 6.25168H5.5H5C2.58 6.25168 1.25 7.58168 1.25 10.0017V14.0017C1.25 16.4217 2.58 17.7517 5 17.7517H5.5H6.43C6.66 17.7517 6.89 17.8217 7.09 17.9417L10.01 19.7717C10.89 20.3217 11.75 20.5917 12.55 20.5917C13.07 20.5917 13.57 20.4717 14.02 20.2217C15.13 19.6017 15.75 18.3117 15.75 16.5917V7.41168C15.75 5.69168 15.13 4.40168 14.02 3.78168Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const VolumeLowIcon = `export const VolumeLowIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M19.3284 16.7503C19.1684 16.7503 19.0184 16.7003 18.8784 16.6003C18.5484 16.3503 18.4784 15.8803 18.7284 15.5503C20.2984 13.4603 20.2984 10.5403 18.7284 8.45027C18.4784 8.12027 18.5484 7.65027 18.8784 7.40027C19.2084 7.15027 19.6784 7.22027 19.9284 7.55027C21.8984 10.1703 21.8984 13.8303 19.9284 16.4503C19.7884 16.6503 19.5584 16.7503 19.3284 16.7503Z"
-      fill="currentColor"
-    />
-    <path
-      d="M15.3481 3.78168C14.2281 3.16168 12.7981 3.32168 11.3381 4.23168L8.41813 6.06168C8.21813 6.18168 7.98813 6.25168 7.75813 6.25168H6.82812H6.32812C3.90812 6.25168 2.57812 7.58168 2.57812 10.0017V14.0017C2.57812 16.4217 3.90812 17.7517 6.32812 17.7517H6.82812H7.75813C7.98813 17.7517 8.21813 17.8217 8.41813 17.9417L11.3381 19.7717C12.2181 20.3217 13.0781 20.5917 13.8781 20.5917C14.3981 20.5917 14.8981 20.4717 15.3481 20.2217C16.4581 19.6017 17.0781 18.3117 17.0781 16.5917V7.41168C17.0781 5.69168 16.4581 4.40168 15.3481 3.78168Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Slider} from "@nextui-org/react";
-import {VolumeLowIcon} from "./VolumeLowIcon";
-import {VolumeHighIcon} from "./VolumeHighIcon";
-
-export default function App() {
-  return (
-    <Slider 
-      aria-label="Volume"
-      size="lg"
-      color="success"
-      startContent={<VolumeLowIcon className="text-2xl" />}
-      endContent={<VolumeHighIcon className="text-2xl" />}
-      className="max-w-md"
-      defaultValue={40}
-    />
-  );
-}`;
+import App from "./start-end-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/VolumeHighIcon.jsx": VolumeHighIcon,
-  "/VolumeLowIcon.jsx": VolumeLowIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/slider/tooltip.raw.jsx b/apps/docs/content/components/slider/tooltip.raw.jsx
new file mode 100644
index 0000000000..5719863d85
--- /dev/null
+++ b/apps/docs/content/components/slider/tooltip.raw.jsx
@@ -0,0 +1,30 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      className="max-w-md"
+      defaultValue={0.2}
+      formatOptions={{style: "percent"}}
+      label="Select a value"
+      marks={[
+        {
+          value: 0.2,
+          label: "20%",
+        },
+        {
+          value: 0.5,
+          label: "50%",
+        },
+        {
+          value: 0.8,
+          label: "80%",
+        },
+      ]}
+      maxValue={1}
+      minValue={0}
+      showTooltip={true}
+      step={0.1}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/tooltip.ts b/apps/docs/content/components/slider/tooltip.ts
index bd97529987..d5f80e1265 100644
--- a/apps/docs/content/components/slider/tooltip.ts
+++ b/apps/docs/content/components/slider/tooltip.ts
@@ -1,33 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Select a value" 
-      showTooltip={true}
-      step={0.1} 
-      formatOptions={{style: "percent"}}
-      maxValue={1}
-      minValue={0}
-      marks={[
-        {
-          value: 0.2,
-          label: "20%",
-        },
-        {
-          value: 0.5,
-          label: "50%",
-        },
-        {
-          value: 0.8,
-          label: "80%",
-        },
-      ]}
-      defaultValue={0.2}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./tooltip.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/usage.raw.jsx b/apps/docs/content/components/slider/usage.raw.jsx
new file mode 100644
index 0000000000..960b8c9791
--- /dev/null
+++ b/apps/docs/content/components/slider/usage.raw.jsx
@@ -0,0 +1,14 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      className="max-w-md"
+      defaultValue={0.4}
+      label="Temperature"
+      maxValue={1}
+      minValue={0}
+      step={0.01}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/usage.ts b/apps/docs/content/components/slider/usage.ts
index 9d2e81ac21..1118304c37 100644
--- a/apps/docs/content/components/slider/usage.ts
+++ b/apps/docs/content/components/slider/usage.ts
@@ -1,17 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Temperature" 
-      step={0.01} 
-      maxValue={1} 
-      minValue={0} 
-      defaultValue={0.4}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/value-formatting.raw.jsx b/apps/docs/content/components/slider/value-formatting.raw.jsx
new file mode 100644
index 0000000000..1bd3f0cd26
--- /dev/null
+++ b/apps/docs/content/components/slider/value-formatting.raw.jsx
@@ -0,0 +1,14 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      className="max-w-md"
+      defaultValue={40}
+      formatOptions={{style: "currency", currency: "JPY"}}
+      label="Currency"
+      showTooltip={true}
+      tooltipValueFormatOptions={{style: "currency", currency: "JPY"}}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/value-formatting.ts b/apps/docs/content/components/slider/value-formatting.ts
index 096dd9947f..0cd558d45d 100644
--- a/apps/docs/content/components/slider/value-formatting.ts
+++ b/apps/docs/content/components/slider/value-formatting.ts
@@ -1,17 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Currency" 
-      showTooltip={true}
-      formatOptions={{style: 'currency', currency: 'JPY'}}
-      tooltipValueFormatOptions={{style: 'currency', currency: 'JPY'}}
-      defaultValue={40}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./value-formatting.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/vertical.raw.jsx b/apps/docs/content/components/slider/vertical.raw.jsx
new file mode 100644
index 0000000000..779c0628cd
--- /dev/null
+++ b/apps/docs/content/components/slider/vertical.raw.jsx
@@ -0,0 +1,35 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-row  max-w-md h-[348px] gap-6 w-full">
+      <Slider
+        aria-label="Temperature"
+        defaultValue={0.2}
+        maxValue={1}
+        minValue={0}
+        orientation="vertical"
+        size="sm"
+        step={0.01}
+      />
+      <Slider
+        aria-label="Temperature"
+        defaultValue={0.4}
+        maxValue={1}
+        minValue={0}
+        orientation="vertical"
+        size="md"
+        step={0.01}
+      />
+      <Slider
+        aria-label="Temperature"
+        defaultValue={0.6}
+        maxValue={1}
+        minValue={0}
+        orientation="vertical"
+        size="lg"
+        step={0.01}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/vertical.ts b/apps/docs/content/components/slider/vertical.ts
index f3f7799b1e..697ac10343 100644
--- a/apps/docs/content/components/slider/vertical.ts
+++ b/apps/docs/content/components/slider/vertical.ts
@@ -1,38 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-row  max-w-md h-[348px] gap-6 w-full">
-      <Slider   
-        size="sm"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        orientation="vertical"
-        aria-label="Temperature"
-        defaultValue={0.2}
-      />
-      <Slider   
-        size="md"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        orientation="vertical"
-        aria-label="Temperature"
-        defaultValue={0.4}
-      />
-      <Slider   
-        size="lg"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        orientation="vertical"
-        aria-label="Temperature"
-        defaultValue={0.6}
-      />
-    </div> 
-  );
-}`;
+import App from "./vertical.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/visible-steps.raw.jsx b/apps/docs/content/components/slider/visible-steps.raw.jsx
new file mode 100644
index 0000000000..d6e3690efa
--- /dev/null
+++ b/apps/docs/content/components/slider/visible-steps.raw.jsx
@@ -0,0 +1,41 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <Slider
+        className="max-w-md"
+        color="foreground"
+        defaultValue={0.2}
+        label="Temperature"
+        maxValue={1}
+        minValue={0}
+        showSteps={true}
+        size="sm"
+        step={0.1}
+      />
+      <Slider
+        className="max-w-md"
+        color="foreground"
+        defaultValue={0.4}
+        label="Temperature"
+        maxValue={1}
+        minValue={0}
+        showSteps={true}
+        size="md"
+        step={0.1}
+      />
+      <Slider
+        className="max-w-md"
+        color="foreground"
+        defaultValue={0.6}
+        label="Temperature"
+        maxValue={1}
+        minValue={0}
+        showSteps={true}
+        size="lg"
+        step={0.1}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/visible-steps.ts b/apps/docs/content/components/slider/visible-steps.ts
index da06557c73..ae20aa27a1 100644
--- a/apps/docs/content/components/slider/visible-steps.ts
+++ b/apps/docs/content/components/slider/visible-steps.ts
@@ -1,44 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-md">
-      <Slider   
-        size="sm"
-        step={0.1}
-        color="foreground"
-        label="Temperature"
-        showSteps={true} 
-        maxValue={1} 
-        minValue={0} 
-        defaultValue={0.2}
-        className="max-w-md" 
-      />
-      <Slider   
-        size="md"
-        step={0.1}
-        color="foreground"
-        label="Temperature"
-        showSteps={true} 
-        maxValue={1} 
-        minValue={0} 
-        defaultValue={0.4}
-        className="max-w-md" 
-      />
-      <Slider   
-        size="lg"
-        step={0.1}
-        color="foreground"
-        label="Temperature"
-        showSteps={true} 
-        maxValue={1} 
-        minValue={0} 
-        defaultValue={0.6}
-        className="max-w-md" 
-      />
-    </div> 
-  );
-}`;
+import App from "./visible-steps.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,