diff --git a/.changeset/eighty-kids-drop.md b/.changeset/eighty-kids-drop.md
new file mode 100644
index 0000000000..9b4e8e1635
--- /dev/null
+++ b/.changeset/eighty-kids-drop.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+Revise slider styles (#2880)
diff --git a/packages/components/slider/__tests__/slider.test.tsx b/packages/components/slider/__tests__/slider.test.tsx
index 9507e3e80e..247baad70c 100644
--- a/packages/components/slider/__tests__/slider.test.tsx
+++ b/packages/components/slider/__tests__/slider.test.tsx
@@ -214,3 +214,77 @@ describe("Slider", () => {
expect(setValues).toStrictEqual([[15, 25]]);
});
});
+
+it("should supports hideThumb", async function () {
+ const {container} = render();
+
+ const track = container.querySelector("[data-slot='track']");
+
+ expect(track).toHaveAttribute("data-thumb-hidden", "true");
+});
+
+it("should supports marks", async function () {
+ const {container} = render(
+ ,
+ );
+
+ const marks = container.querySelectorAll("[data-slot='mark']");
+
+ expect(marks).toHaveLength(3);
+});
+
+it("should supports marks with hideThumb", async function () {
+ const {container} = render(
+ ,
+ );
+
+ const track = container.querySelector("[data-slot='track']");
+
+ expect(track).toHaveAttribute("data-thumb-hidden", "true");
+
+ const marks = container.querySelectorAll("[data-slot='mark']");
+
+ expect(marks).toHaveLength(3);
+});
diff --git a/packages/components/slider/stories/slider.stories.tsx b/packages/components/slider/stories/slider.stories.tsx
index bcbf3b79dd..64022e7995 100644
--- a/packages/components/slider/stories/slider.stories.tsx
+++ b/packages/components/slider/stories/slider.stories.tsx
@@ -315,7 +315,24 @@ export const ThumbHidden = {
"aria-label": "Player progress",
color: "foreground",
hideThumb: true,
- defaultValue: 20,
+ maxValue: 1,
+ minValue: 0,
+ step: 0.1,
+ marks: [
+ {
+ value: 0.2,
+ label: "20%",
+ },
+ {
+ value: 0.5,
+ label: "50%",
+ },
+ {
+ value: 0.8,
+ label: "80%",
+ },
+ ],
+ defaultValue: 0.2,
},
};
diff --git a/packages/core/theme/src/components/slider.ts b/packages/core/theme/src/components/slider.ts
index e21b870a29..a4385a0c29 100644
--- a/packages/core/theme/src/components/slider.ts
+++ b/packages/core/theme/src/components/slider.ts
@@ -166,6 +166,7 @@ const slider = tv({
hasMarks: {
true: {
base: "mb-5",
+ mark: "cursor-pointer",
},
false: {},
},
@@ -185,7 +186,7 @@ const slider = tv({
hideThumb: {
true: {
thumb: "sr-only",
- track: "overflow-hidden cursor-pointer",
+ track: "cursor-pointer",
},
},
hasSingleThumb: {
@@ -266,7 +267,7 @@ const slider = tv({
isVertical: false,
class: {
track:
- "h-1 my-[calc((theme(spacing.5)-theme(spacing.1))/2)] data-[thumb-hidden=false]:border-x-[calc(theme(spacing.5)/2)]",
+ "h-1 my-[calc((theme(spacing.5)-theme(spacing.1))/2)] border-x-[calc(theme(spacing.5)/2)]",
},
},
{
@@ -274,7 +275,7 @@ const slider = tv({
isVertical: false,
class: {
track:
- "h-3 my-[calc((theme(spacing.6)-theme(spacing.3))/2)] data-[thumb-hidden=false]:border-x-[calc(theme(spacing.6)/2)]",
+ "h-3 my-[calc((theme(spacing.6)-theme(spacing.3))/2)] border-x-[calc(theme(spacing.6)/2)]",
},
},
{
@@ -282,7 +283,7 @@ const slider = tv({
isVertical: false,
class: {
track:
- "h-7 my-[calc((theme(spacing.7)-theme(spacing.5))/2)] data-[thumb-hidden=false]:border-x-[calc(theme(spacing.7)/2)]",
+ "h-7 my-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-x-[calc(theme(spacing.7)/2)]",
},
},
// size && isVertical
@@ -291,7 +292,7 @@ const slider = tv({
isVertical: true,
class: {
track:
- "w-1 mx-[calc((theme(spacing.5)-theme(spacing.1))/2)] data-[thumb-hidden=false]:border-y-[calc(theme(spacing.5)/2)]",
+ "w-1 mx-[calc((theme(spacing.5)-theme(spacing.1))/2)] border-y-[calc(theme(spacing.5)/2)]",
},
},
{
@@ -299,7 +300,7 @@ const slider = tv({
isVertical: true,
class: {
track:
- "w-3 mx-[calc((theme(spacing.6)-theme(spacing.3))/2)] data-[thumb-hidden=false]:border-y-[calc(theme(spacing.6)/2)]",
+ "w-3 mx-[calc((theme(spacing.6)-theme(spacing.3))/2)] border-y-[calc(theme(spacing.6)/2)]",
},
},
{
@@ -307,7 +308,7 @@ const slider = tv({
isVertical: true,
class: {
track:
- "w-7 mx-[calc((theme(spacing.7)-theme(spacing.5))/2)] data-[thumb-hidden=false]:border-y-[calc(theme(spacing.7)/2)]",
+ "w-7 mx-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-y-[calc(theme(spacing.7)/2)]",
},
},
// color && !isVertical && hasSingleThumb