@kushagradhawan/kookie-ui 0.1.29 → 0.1.30

package/src/components/slider.css

@@ -1,21 +1,45 @@
 .rt-SliderRoot {
-  --slider-thumb-size: calc(var(--slider-track-size) + var(--space-1));
+  --slider-thumb-width: var(--space-3);
+  --slider-thumb-height: var(--space-2);
 
   position: relative;
   display: flex;
   align-items: center;
   flex-grow: 1;
 
-  border-radius: max(
-    calc(var(--radius-factor) * var(--slider-track-size) / var(--slider-track-radius-factor)),
-    calc(var(--radius-factor) * var(--radius-thumb))
-  );
+  border-radius: var(--slider-radius);
 
   /* ensures no selection */
   user-select: none;
   /* disable browser handling of all panning and zooming gestures on touch devices */
   touch-action: none;
 
+  /* 
+   * Theme-level translucent override
+   * Applies backdrop filter for elevated visual effects
+   */
+  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+
+  /* Prevent backdrop-filter stacking with parent elements */
+  isolation: isolate;
+
+  /* 
+   * Component-level material overrides
+   * These ensure proper rendering based on material setting
+   */
+  &:where([data-panel-background='solid'], [data-material='solid']) {
+    backdrop-filter: none;
+    --backdrop-filter-components: none;
+  }
+  
+  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+
   &:where([data-orientation='horizontal']) {
     width: stretch;
     height: var(--slider-track-size);
@@ -57,8 +81,8 @@
 
 .rt-SliderThumb {
   display: block;
-  width: var(--slider-thumb-size);
-  height: var(--slider-thumb-size);
+  width: var(--slider-thumb-width);
+  height: var(--slider-thumb-height);
 
   /* Safari */
   outline: 0;
@@ -67,8 +91,8 @@
     content: '';
     position: absolute;
     z-index: -1;
-    width: calc(var(--slider-thumb-size) * var(--slider-thumb-hit-area-multiplier));
-    height: calc(var(--slider-thumb-size) * var(--slider-thumb-hit-area-multiplier));
+    width: calc(var(--slider-thumb-width) * var(--slider-thumb-hit-area-multiplier));
+    height: calc(var(--slider-thumb-height) * var(--slider-thumb-hit-area-multiplier));
     top: var(--position-center);
     left: var(--position-center);
     transform: translate(-50%, -50%);
@@ -80,13 +104,13 @@
     position: absolute;
     inset: calc(var(--slider-thumb-inset-factor) * var(--slider-track-size) * -1);
     background-color: white;
-    border-radius: max(var(--radius-1), var(--radius-thumb));
-    box-shadow: var(--slider-thumb-box-shadow);
-    cursor: var(--cursor-slider-thumb);
+    border-radius: var(--slider-thumb-radius);
+    box-shadow: var(--shadow-2);
+    cursor: pointer;
   }
 
   &:where(:focus-visible)::after {
-    box-shadow: var(--slider-thumb-box-shadow), 0 0 0 var(--slider-focus-ring-inner) var(--accent-3), 0 0 0 var(--slider-focus-ring-outer) var(--focus-8);
+    box-shadow: var(--shadow-3), 0 0 0 var(--slider-focus-ring-inner) var(--accent-3), 0 0 0 var(--slider-focus-ring-outer) var(--focus-8);
   }
 
   &:where(:active) {
@@ -103,13 +127,32 @@
 @breakpoints {
   .rt-SliderRoot {
     &:where(.rt-r-size-1) {
-      --slider-track-size: calc(var(--space-2) * var(--size-multiplier-small));
+      --slider-track-size: var(--progress-slider-height-1);
+      --slider-radius: var(--progress-slider-radius-1);
+      --slider-thumb-width: var(--space-3);
+      --slider-thumb-height: var(--space-2);
+      --slider-thumb-radius: calc(var(--radius-1) * 0.75);
     }
     &:where(.rt-r-size-2) {
-      --slider-track-size: var(--space-2);
+      --slider-track-size: var(--progress-slider-height-2);
+      --slider-radius: var(--progress-slider-radius-2);
+      --slider-thumb-width: var(--space-4);
+      --slider-thumb-height: calc(var(--space-2) + var(--space-1));
+      --slider-thumb-radius: calc(var(--radius-2) * 0.75);
     }
     &:where(.rt-r-size-3) {
-      --slider-track-size: calc(var(--space-2) * var(--size-multiplier-large));
+      --slider-track-size: var(--progress-slider-height-3);
+      --slider-radius: var(--progress-slider-radius-3);
+      --slider-thumb-width: var(--space-4);
+      --slider-thumb-height: var(--space-3);
+      --slider-thumb-radius: calc(var(--radius-3) * 0.75);
+    }
+    &:where(.rt-r-size-4) {
+      --slider-track-size: var(--progress-slider-height-4);
+      --slider-radius: var(--progress-slider-radius-4);
+      --slider-thumb-width: calc(var(--space-4) + var(--space-1));
+      --slider-thumb-height: calc(var(--space-3) + var(--space-1));
+      --slider-thumb-radius: calc(var(--radius-4) * 0.75);
     }
   }
 }
@@ -124,103 +167,115 @@
 
 .rt-SliderRoot:where(.rt-variant-surface) {
   & :where(.rt-SliderTrack) {
-    background-color: var(--gray-a3);
-    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a5);
+    background-color: var(--gray-2);
+    box-shadow: inset 0 0 0 1px var(--gray-6);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+      box-shadow: inset 0 0 0 1px var(--gray-a6);
+    }
+
+    /* Component-level overrides */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--gray-2);
+      box-shadow: inset 0 0 0 1px var(--gray-6);
+    }
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+      box-shadow: inset 0 0 0 1px var(--gray-a6);
+    }
 
     &:where([data-disabled]) {
-      box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a4);
+      box-shadow: inset 0 0 0 1px var(--gray-5);
     }
   }
 
   & :where(.rt-SliderRange) {
-    background-color: var(--accent-track);
-    background-image: var(--slider-range-high-contrast-background-image);
-    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a5);
+    background-color: var(--accent-9);
   }
 
-  & :where(.rt-SliderThumb) {
-    --slider-thumb-box-shadow: 0 0 0 1px var(--black-a4);
-
-    &:where([data-disabled])::after {
-      background-color: var(--gray-1);
-      box-shadow: 0 0 0 1px var(--gray-6);
+  &:where(.rt-high-contrast) {
+    & :where(.rt-SliderRange) {
+      background-color: var(--accent-12);
     }
   }
+
+
 }
 
-/* classic */
+/* soft */
 
-.rt-SliderRoot:where(.rt-variant-classic) {
+.rt-SliderRoot:where(.rt-variant-soft) {
   & :where(.rt-SliderTrack) {
-    background-color: var(--gray-a3);
-    position: relative;
-
-    &::before {
-      content: '';
-      inset: 0;
-      position: absolute;
-      border-radius: inherit;
-      box-shadow: var(--classic-inset-shadow-dark);
+    background-color: var(--gray-3);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
     }
-    &:where([data-disabled])::before {
-      opacity: var(--opacity-disabled);
+
+    /* Component-level overrides */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--gray-3);
+    }
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
     }
   }
 
   & :where(.rt-SliderRange) {
-    background-color: var(--accent-track);
-    background-image: var(--slider-range-high-contrast-background-image);
-    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--accent-a4), inset 0 0 0 var(--border-width-standard) var(--black-a1),
-      inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
+    background-color: var(--accent-9);
+  }
 
-    &:where(.rt-high-contrast) {
-      box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--black-a2), inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
+  &:where(.rt-high-contrast) {
+    & :where(.rt-SliderRange) {
+      background-color: var(--accent-12);
     }
   }
 
   & :where(.rt-SliderThumb) {
-    /* prettier-ignore */
-    --slider-thumb-box-shadow:
-      0 0 0 1px var(--black-a3),
-      0 1px 3px var(--black-a1),
-      0 2px 4px -1px var(--black-a1);
-
-    &:where([data-disabled])::after {
-      background-color: var(--gray-1);
-      box-shadow: 0 0 0 1px var(--gray-6);
-    }
+    --slider-thumb-box-shadow: var(--shadow-3);
   }
 }
 
-/* soft */
+/* outline */
 
-.rt-SliderRoot:where(.rt-variant-soft) {
+.rt-SliderRoot:where(.rt-variant-outline) {
   & :where(.rt-SliderTrack) {
-    background-color: var(--gray-a4);
-    /* Blend with white to increase contrast in dark mode */
-    background-image: linear-gradient(var(--white-a1), var(--white-a1));
+    /* Base state: no background, just border */
+    box-shadow: inset 0 0 0 1px var(--gray-6);
 
-    &:where([data-disabled]) {
-      background-color: var(--gray-a4);
-      background-image: none;
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      box-shadow: inset 0 0 0 1px var(--gray-a6);
+    }
+
+    /* Component-level overrides */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      box-shadow: inset 0 0 0 1px var(--gray-6);
+    }
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      box-shadow: inset 0 0 0 1px var(--gray-a6);
     }
   }
 
   & :where(.rt-SliderRange) {
-    background-image: linear-gradient(var(--accent-a5), var(--accent-a5)),
-      var(--slider-range-high-contrast-background-image);
-    background-color: var(--accent-6);
+    background-color: var(--accent-9);
   }
 
-  & :where(.rt-SliderThumb) {
-    --slider-thumb-box-shadow: 0 0 0 1px var(--black-a3), 0 0 0 1px var(--gray-a2), 0 0 0 1px var(--accent-a2),
-      0 1px 2px var(--gray-a4), 0 1px 3px -0.5px var(--gray-a3);
-
-    &:where([data-disabled])::after {
-      background-color: var(--gray-1);
-      box-shadow: 0 0 0 1px var(--gray-5);
+  &:where(.rt-high-contrast) {
+    & :where(.rt-SliderRange) {
+      background-color: var(--accent-12);
     }
   }
+
+  & :where(.rt-SliderThumb) {
+    --slider-thumb-box-shadow: var(--shadow-3);
+  }
 }
 
 /* all high-contrast */
@@ -236,28 +291,113 @@
   --slider-range-high-contrast-background-image: none;
 }
 
-:where(.radix-themes) {
-  --slider-disabled-blend-mode: multiply;
-}
-:is(.dark, .dark-theme),
-:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
-  --slider-disabled-blend-mode: screen;
-}
+
 
 /* all disabled Sliders */
 
 [data-disabled] {
   .rt-SliderRoot:where(&) {
     cursor: var(--cursor-disabled);
-    mix-blend-mode: var(--slider-disabled-blend-mode);
+  }
+  .rt-SliderTrack:where(&) {
+    background-color: var(--gray-a3) !important;
+    box-shadow: none !important;
   }
   .rt-SliderRange:where(&) {
-    background-color: transparent;
-    background-image: none;
-    box-shadow: none;
+    background-color: var(--accent-a3) !important;
   }
-  .rt-SliderThumb:where(&),
-  .rt-SliderThumb:where(&)::after {
+  .rt-SliderThumb:where(&) {
     cursor: var(--cursor-disabled);
   }
+  .rt-SliderThumb:where(&)::after {
+    background-color: var(--gray-3) !important;
+    box-shadow: none !important;
+  }
+}
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * TICKS                                                                                           *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.rt-SliderContainer {
+  position: relative;
+}
+
+.rt-SliderTicks {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: var(--space-2);
+  pointer-events: auto;
+  height: 44px;
+}
+
+.rt-SliderTick {
+  position: absolute;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-1);
+  background: none;
+  border: none;
+  padding: var(--space-2);
+  cursor: pointer;
+  min-height: 44px;
+  min-width: 44px;
+  border-radius: var(--radius-2);
+  transition: background-color var(--transition-standard);
+  z-index: 1;
+  pointer-events: auto;
+}
+
+.rt-SliderTick:where(:hover) {
+  :where(.rt-SliderTickMark) {
+    background-color: var(--gray-12) !important;
+  }
+  
+  :where(.rt-SliderTickLabel) {
+    color: var(--gray-12) !important;
+    font-weight: var(--font-weight-medium);
+  }
+}
+
+.rt-SliderTick:where(:active) {
+  :where(.rt-SliderTickMark) {
+    background-color: var(--gray-12) !important;
+  }
+  
+  :where(.rt-SliderTickLabel) {
+    color: var(--gray-12) !important;
+    font-weight: var(--font-weight-medium);
+  }
+}
+
+.rt-SliderTick:where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+
+.rt-SliderTickMark {
+  width: 1px;
+  height: var(--space-2);
+  background-color: var(--gray-6);
+  border-radius: 1px;
+  transition: background-color var(--transition-standard);
+}
+
+.rt-SliderTickLabel {
+  font-size: var(--font-size-0);
+  line-height: var(--line-height-0);
+  color: var(--gray-11);
+  font-weight: var(--font-weight-regular);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 60px;
+  text-align: center;
+  transition: color var(--transition-standard), font-weight var(--transition-standard);
 }

package/src/components/slider.props.tsx

@@ -4,18 +4,22 @@ import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
-const variants = ['classic', 'surface', 'soft'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
+const variants = ['surface', 'soft', 'outline'] as const;
 
 const sliderPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+  showTickLabels: { type: 'boolean', className: 'rt-show-tick-labels' },
+  snapToTicks: { type: 'boolean', className: 'rt-snap-to-ticks' },
   ...colorPropDef,
   ...highContrastPropDef,
   ...radiusPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
+  showTickLabels: PropDef<boolean>;
+  snapToTicks: PropDef<boolean>;
 };
 
 export { sliderPropDefs };

package/src/components/slider.tsx

@@ -18,36 +18,213 @@ interface SliderProps
       'asChild' | 'color' | 'children' | 'defaultChecked'
     >,
     MarginProps,
-    SliderOwnProps {}
+    SliderOwnProps {
+  ticks?: Array<{ value: number; label?: string }>;
+  unit?: string;
+}
 const Slider = React.forwardRef<SliderElement, SliderProps>((props, forwardedRef) => {
   const { className, color, radius, tabIndex, ...sliderProps } = extractProps(
     props,
     sliderPropDefs,
-    marginPropDefs
+    marginPropDefs,
   );
+  const { ticks, showTickLabels, snapToTicks, unit } = props;
+
+  const min = sliderProps.min ?? 0;
+  const max = sliderProps.max ?? 100;
+
+  // Current value for accessibility
+  const currentValue = sliderProps.value ?? sliderProps.defaultValue ?? [min];
+  const isRange = Array.isArray(currentValue) && currentValue.length > 1;
+
+  // For snapping to ticks, we need to handle this differently
+  // Radix slider doesn't support arbitrary step values, so we'll handle snapping in the onValueChange
+  const step = sliderProps.step;
+
+  // Optimized snap-to-ticks with memoized sorted ticks
+  const sortedTicks = React.useMemo(
+    () => (ticks ? [...ticks].sort((a, b) => a.value - b.value) : []),
+    [ticks],
+  );
+
+  // Function to snap value to nearest tick (optimized)
+  const snapToNearestTick = React.useCallback(
+    (value: number): number => {
+      if (!snapToTicks || !sortedTicks.length) return value;
+
+      // Binary search for closest tick
+      let left = 0;
+      let right = sortedTicks.length - 1;
+
+      if (value <= sortedTicks[left].value) return sortedTicks[left].value;
+      if (value >= sortedTicks[right].value) return sortedTicks[right].value;
+
+      while (left <= right) {
+        const mid = Math.floor((left + right) / 2);
+        if (sortedTicks[mid].value === value) return value;
+
+        if (sortedTicks[mid].value < value) {
+          left = mid + 1;
+        } else {
+          right = mid - 1;
+        }
+      }
+
+      // Find closest between left and right
+      const leftDistance = Math.abs(value - sortedTicks[right].value);
+      const rightDistance = Math.abs(value - sortedTicks[left].value);
+
+      return leftDistance <= rightDistance ? sortedTicks[right].value : sortedTicks[left].value;
+    },
+    [snapToTicks, sortedTicks],
+  );
+
+  // Format value text for accessibility
+  const formatValueText = React.useCallback(
+    (values: number[]): string => {
+      const formatValue = (val: number) => (unit ? `${val} ${unit}` : val.toString());
+
+      if (values.length === 1) {
+        return `${formatValue(values[0])} out of ${formatValue(max)}`;
+      } else if (values.length === 2) {
+        return `${formatValue(values[0])} to ${formatValue(values[1])} out of ${formatValue(max)}`;
+      } else {
+        return `${values.map(formatValue).join(', ')} out of ${formatValue(max)}`;
+      }
+    },
+    [unit, max],
+  );
+
+  // Memoize tick elements for performance
+  const tickElements = React.useMemo(() => {
+    if (!ticks) return null;
+
+    return ticks.map((tick, index) => ({
+      ...tick,
+      percentage: ((tick.value - min) / (max - min)) * 100,
+      index,
+    }));
+  }, [ticks, min, max]);
+
+  // Live region state for accessibility announcements
+  const [announceValue, setAnnounceValue] = React.useState<string>('');
+
+  const { onValueChange } = sliderProps;
+  // Handle value changes with snapping
+  const handleValueChange = React.useCallback(
+    (newValue: number[]) => {
+      const finalValue =
+        snapToTicks && ticks ? newValue.map((v) => snapToNearestTick(v)) : newValue;
+
+      // Update live region for screen readers
+      const valueText = formatValueText(finalValue);
+      setAnnounceValue(valueText);
+
+      onValueChange?.(finalValue);
+    },
+    [snapToTicks, ticks, snapToNearestTick, formatValueText, onValueChange],
+  );
+
+  // Clear announcement after a delay to prevent spam
+  React.useEffect(() => {
+    if (announceValue) {
+      const timer = setTimeout(() => setAnnounceValue(''), 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [announceValue]);
+
   return (
-    <SliderPrimitive.Root
-      data-accent-color={color}
-      data-radius={radius}
-      ref={forwardedRef}
-      {...sliderProps}
-      asChild={false}
-      className={classNames('rt-SliderRoot', className)}
-    >
-      <SliderPrimitive.Track className="rt-SliderTrack">
-        <SliderPrimitive.Range
-          className={classNames('rt-SliderRange', { 'rt-high-contrast': props.highContrast })}
-          data-inverted={sliderProps.inverted ? '' : undefined}
-        />
-      </SliderPrimitive.Track>
-      {(sliderProps.value ?? sliderProps.defaultValue ?? []).map((value, index) => (
-        <SliderPrimitive.Thumb
-          key={index}
-          className="rt-SliderThumb"
-          {...(tabIndex !== undefined ? { tabIndex } : undefined)}
-        />
-      ))}
-    </SliderPrimitive.Root>
+    <div className="rt-SliderContainer">
+      {/* Live region for screen reader announcements */}
+      <div
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+        style={{
+          position: 'absolute',
+          left: '-10000px',
+          width: '1px',
+          height: '1px',
+          overflow: 'hidden',
+        }}
+      >
+        {announceValue}
+      </div>
+
+      <SliderPrimitive.Root
+        data-accent-color={color}
+        data-radius={radius}
+        ref={forwardedRef}
+        {...sliderProps}
+        step={step}
+        onValueChange={handleValueChange}
+        asChild={false}
+        className={classNames('rt-SliderRoot', className)}
+        // Essential ARIA attributes for WCAG 2.2 AA compliance
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={Array.isArray(currentValue) ? currentValue[0] : (currentValue as number)}
+        aria-valuetext={formatValueText(currentValue as number[])}
+        aria-label={props['aria-label'] || `${isRange ? 'Range' : 'Value'} slider`}
+      >
+        <SliderPrimitive.Track className="rt-SliderTrack">
+          <SliderPrimitive.Range
+            className={classNames('rt-SliderRange', { 'rt-high-contrast': props.highContrast })}
+            data-inverted={sliderProps.inverted ? '' : undefined}
+          />
+        </SliderPrimitive.Track>
+        {(sliderProps.value ?? sliderProps.defaultValue ?? []).map((value, index) => (
+          <SliderPrimitive.Thumb
+            key={index}
+            className="rt-SliderThumb"
+            {...(tabIndex !== undefined ? { tabIndex } : undefined)}
+            aria-label={
+              isRange
+                ? `${index === 0 ? 'Minimum' : index === 1 ? 'Maximum' : `Thumb ${index + 1}`} value: ${unit ? `${value} ${unit}` : value}`
+                : `Slider value: ${unit ? `${value} ${unit}` : value}`
+            }
+            aria-valuetext={unit ? `${value} ${unit}` : value.toString()}
+          />
+        ))}
+      </SliderPrimitive.Root>
+      {tickElements && (
+        <div className="rt-SliderTicks" role="group" aria-label="Slider tick marks">
+          {tickElements.map((tick) => {
+            return (
+              <button
+                key={tick.index}
+                className="rt-SliderTick"
+                style={{
+                  left: `${tick.percentage}%`,
+                  transform: 'translateX(-50%)',
+                }}
+                onClick={() => {
+                  const currentValues = sliderProps.value ?? sliderProps.defaultValue ?? [min];
+                  const newValue = Array.isArray(currentValues)
+                    ? currentValues.map(() => tick.value)
+                    : [tick.value];
+
+                  handleValueChange(newValue);
+                }}
+                aria-label={`Set to ${tick.label || (unit ? `${tick.value} ${unit}` : tick.value)}`}
+                aria-describedby={tick.label ? undefined : `tick-${tick.index}-value`}
+                type="button"
+              >
+                <div className="rt-SliderTickMark" />
+                {tick.label && showTickLabels !== false && (
+                  <div className="rt-SliderTickLabel">{tick.label}</div>
+                )}
+                {!tick.label && (
+                  <span id={`tick-${tick.index}-value`} className="sr-only">
+                    {unit ? `${tick.value} ${unit}` : tick.value}
+                  </span>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
   );
 });
 Slider.displayName = 'Slider';