From 1a111ce8acf3141f7a40b16563553a810dee4c12 Mon Sep 17 00:00:00 2001
From: Tayyaba Taimur <19307765+tayyabataimur@users.noreply.github.com>
Date: Fri, 7 Feb 2025 12:39:29 +0000
Subject: [PATCH] fixup! Slider with native input and thumb

---
 packages/lab/src/slider/Slider.css                   | 7 ++++++-
 packages/lab/src/slider/internal/SliderTrack.tsx     | 6 +++---
 packages/lab/stories/slider/range-slider.stories.tsx | 4 ----
 packages/lab/stories/slider/slider.stories.tsx       | 4 ----
 4 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/lab/src/slider/Slider.css b/packages/lab/src/slider/Slider.css
index b37ee57d37..1568b58b23 100644
--- a/packages/lab/src/slider/Slider.css
+++ b/packages/lab/src/slider/Slider.css
@@ -14,6 +14,10 @@
   width: 100%;
 }
 
+.saltSlider-disabled {
+  cursor: not-allowed;
+}
+
 .saltSlider-withMarkers {
   flex-direction: column;
   gap: calc((var(--salt-size-base) - var(--salt-size-selectable)) / 2);
@@ -79,7 +83,7 @@
 
 .saltSlider-disabled .saltSlider-track,
 .saltSlider-disabled .saltSliderThumb {
-  cursor: not-allowed;
+  pointer-events: none;
 }
 
 .saltSliderThumb-focused {
@@ -100,6 +104,7 @@
   transform: translate(-50%, -50%);
   border: 1px solid var(--salt-accent-borderColor);
   padding: 6px;
+  pointer-events: none;
   user-select: none;
   z-index: 1;
   left: var(--slider-progressPercentage);
diff --git a/packages/lab/src/slider/internal/SliderTrack.tsx b/packages/lab/src/slider/internal/SliderTrack.tsx
index 6483ab01ed..20b22ae211 100644
--- a/packages/lab/src/slider/internal/SliderTrack.tsx
+++ b/packages/lab/src/slider/internal/SliderTrack.tsx
@@ -60,7 +60,7 @@ export const SliderTrack = forwardRef<HTMLDivElement, SliderTrackProps>(
       >
         {/* Min Label */}
         {!markers && (
-          <Text as="label" className={withBaseName("minLabel")}>
+          <Text styleAs="label" className={withBaseName("minLabel")}>
             {minLabel || min}
           </Text>
         )}
@@ -81,7 +81,7 @@ export const SliderTrack = forwardRef<HTMLDivElement, SliderTrackProps>(
         </div>
         {/* Max label */}
         {!markers && (
-          <Text as="label" className={withBaseName("maxLabel")}>
+          <Text styleAs="label" className={withBaseName("maxLabel")}>
             {maxLabel || max}
           </Text>
         )}
@@ -98,7 +98,7 @@ export const SliderTrack = forwardRef<HTMLDivElement, SliderTrackProps>(
                     } as React.CSSProperties
                   }
                   key={marker.value}
-                  as="label"
+                  styleAs="label"
                 >
                   {marker.label}
                 </Text>
diff --git a/packages/lab/stories/slider/range-slider.stories.tsx b/packages/lab/stories/slider/range-slider.stories.tsx
index aab2a089b6..27a48f40e2 100644
--- a/packages/lab/stories/slider/range-slider.stories.tsx
+++ b/packages/lab/stories/slider/range-slider.stories.tsx
@@ -22,10 +22,6 @@ const Template: StoryFn = ({ ...args }) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  min: 0,
-  max: 30,
-  defaultValue: [0, 4],
-  name: "Default range slider",
   "aria-label": "default",
 };
 
diff --git a/packages/lab/stories/slider/slider.stories.tsx b/packages/lab/stories/slider/slider.stories.tsx
index 747e41a0b7..a18a10c9a7 100644
--- a/packages/lab/stories/slider/slider.stories.tsx
+++ b/packages/lab/stories/slider/slider.stories.tsx
@@ -24,10 +24,6 @@ const Template: StoryFn = ({ ...args }) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  min: 5,
-  max: 125,
-  defaultValue: 100,
-  step: 5,
   "aria-label": "default",
 };