fixup! Slider with native input and thumb

jpmorganchase · Feb 7, 2025 · 1a111ce · 1a111ce
1 parent fbc9928
commit 1a111ce
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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",
 };