feat: allow slider mark to be themed

chakra-ui · Aug 26, 2022 · 5e6c3fd · 5e6c3fd · vercel · Aug 26, 2022
1 parent 839c105
commit 5e6c3fd
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/.changeset/clean-yaks-appear.md b/.changeset/clean-yaks-appear.md
@@ -0,0 +1,6 @@
+---
+"@chakra-ui/anatomy": patch
+"@chakra-ui/slider": patch
+---
+
+Allow slider mark to be themable
diff --git a/packages/components/anatomy/src/components.ts b/packages/components/anatomy/src/components.ts
@@ -117,6 +117,7 @@ export const sliderAnatomy = anatomy("slider").parts(
   "track",
   "thumb",
   "filledTrack",
+  "mark",
 )
 
 export const statAnatomy = anatomy("stat").parts(

diff --git a/packages/components/slider/src/slider.tsx b/packages/components/slider/src/slider.tsx
@@ -149,11 +149,13 @@ export interface SliderMarkProps extends HTMLChakraProps<"div"> {
  */
 export const SliderMark = forwardRef<SliderMarkProps, "div">((props, ref) => {
   const { getMarkerProps } = useSliderContext()
+  const styles = useSliderStyles()
   const markProps = getMarkerProps(props, ref)
   return (
     <chakra.div
       {...markProps}
       className={cx("chakra-slider__marker", props.className)}
+      __css={styles.mark}
     />
   )
 })