diff --git a/.changeset/funny-yaks-smoke.md b/.changeset/funny-yaks-smoke.md
new file mode 100644
index 0000000000..bca5b0421e
--- /dev/null
+++ b/.changeset/funny-yaks-smoke.md
@@ -0,0 +1,6 @@
+---
+"@heroui/theme": patch
+"@heroui/slider": patch
+---
+
+fixed slider display when `hideThumb` is `true` (#5085)
diff --git a/packages/components/slider/src/use-slider.ts b/packages/components/slider/src/use-slider.ts
index 1526ccd33d..a88295da41 100644
--- a/packages/components/slider/src/use-slider.ts
+++ b/packages/components/slider/src/use-slider.ts
@@ -311,11 +311,22 @@ export function useSlider(originalProps: UseSliderProps) {
   };
 
   const getTrackProps: PropGetter = (props = {}) => {
+    const fillWidth = (endOffset - startOffset) * 100;
+
     return {
       ref: trackRef,
       "data-slot": "track",
       "data-thumb-hidden": !!originalProps?.hideThumb,
       "data-vertical": isVertical,
+      ...(hasSingleThumb
+        ? {
+            "data-fill-start": fillWidth > 0,
+            "data-fill-end": fillWidth == 100,
+          }
+        : {
+            "data-fill-start": startOffset == 0,
+            "data-fill-end": startOffset * 100 + fillWidth == 100,
+          }),
       className: slots.track({class: classNames?.track}),
       ...trackProps,
       ...props,
diff --git a/packages/core/theme/src/components/slider.ts b/packages/core/theme/src/components/slider.ts
index 3811564678..f0d10ffe43 100644
--- a/packages/core/theme/src/components/slider.ts
+++ b/packages/core/theme/src/components/slider.ts
@@ -311,102 +311,92 @@ const slider = tv({
           "w-7 mx-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-y-[calc(theme(spacing.7)/2)]",
       },
     },
-    // color && !isVertical && hasSingleThumb
+    // color && !isVertical
     {
       color: "foreground",
       isVertical: false,
-      hasSingleThumb: true,
       class: {
-        track: "border-s-foreground",
+        track:
+          "data-[fill-start=true]:border-s-foreground data-[fill-end=true]:border-e-foreground",
       },
     },
     {
       color: "primary",
       isVertical: false,
-      hasSingleThumb: true,
       class: {
-        track: "border-s-primary",
+        track: "data-[fill-start=true]:border-s-primary data-[fill-end=true]:border-e-primary",
       },
     },
     {
       color: "secondary",
       isVertical: false,
-      hasSingleThumb: true,
       class: {
-        track: "border-s-secondary",
+        track: "data-[fill-start=true]:border-s-secondary data-[fill-end=true]:border-e-secondary",
       },
     },
     {
       color: "success",
       isVertical: false,
-      hasSingleThumb: true,
       class: {
-        track: "border-s-success",
+        track: "data-[fill-start=true]:border-s-success data-[fill-end=true]:border-e-success",
       },
     },
     {
       color: "warning",
       isVertical: false,
-      hasSingleThumb: true,
       class: {
-        track: "border-s-warning",
+        track: "data-[fill-start=true]:border-s-warning data-[fill-end=true]:border-e-warning",
       },
     },
     {
       color: "danger",
       isVertical: false,
-      hasSingleThumb: true,
       class: {
-        track: "border-s-danger",
+        track: "data-[fill-start=true]:border-s-danger data-[fill-end=true]:border-e-danger",
       },
     },
-    // color && isVertical && hasSingleThumb
+    // color && isVertical
     {
       color: "foreground",
       isVertical: true,
-      hasSingleThumb: true,
       class: {
-        track: "border-b-foreground",
+        track:
+          "data-[fill-start=true]:border-b-foreground data-[fill-end=true]:border-t-foreground",
       },
     },
     {
       color: "primary",
       isVertical: true,
-      hasSingleThumb: true,
       class: {
-        track: "border-b-primary",
+        track: "data-[fill-start=true]:border-b-primary data-[fill-end=true]:border-t-primary",
       },
     },
     {
       color: "secondary",
       isVertical: true,
-      hasSingleThumb: true,
       class: {
-        track: "border-b-secondary",
+        track: "data-[fill-start=true]:border-b-secondary data-[fill-end=true]:border-t-secondary",
       },
     },
     {
       color: "success",
       isVertical: true,
-      hasSingleThumb: true,
       class: {
-        track: "border-b-success",
+        track: "data-[fill-start=true]:border-b-success data-[fill-end=true]:border-t-success",
       },
     },
     {
       color: "warning",
       isVertical: true,
-      hasSingleThumb: true,
       class: {
-        track: "border-b-warning",
+        track: "data-[fill-start=true]:border-b-warning data-[fill-end=true]:border-t-warning",
       },
     },
     {
       color: "danger",
       isVertical: true,
-      hasSingleThumb: true,
       class: {
-        track: "border-b-danger",
+        track: "data-[fill-start=true]:border-b-danger data-[fill-end=true]:border-t-danger",
       },
     },
   ],