Allow easier styling of mark and dot

src/Marks/Mark.tsx

@@ -1,7 +1,7 @@
+import cls from 'classnames';
 import * as React from 'react';
-import classNames from 'classnames';
-import { getDirectionStyle } from '../util';
 import SliderContext from '../context';
+import { getDirectionStyle } from '../util';
 
 export interface MarkProps {
   prefixCls: string;
@@ -13,22 +13,30 @@ export interface MarkProps {
 
 export default function Mark(props: MarkProps) {
   const { prefixCls, style, children, value, onClick } = props;
-  const { min, max, direction, includedStart, includedEnd, included } =
+  const { min, max, direction, includedStart, includedEnd, included, styles, classNames } =
     React.useContext(SliderContext);
 
   const textCls = `${prefixCls}-text`;
+  const active = included && includedStart <= value && value <= includedEnd;
 
   // ============================ Offset ============================
   const positionStyle = getDirectionStyle(direction, value, min, max);
 
   return (
     <span
-      className={classNames(textCls, {
-        [`${textCls}-active`]: included && includedStart <= value && value <= includedEnd,
-      })}
+      className={cls(
+        textCls,
+        {
+          [`${textCls}-active`]: active,
+        },
+        active && classNames.markActive,
+        classNames.mark,
+      )}
       style={{
         ...positionStyle,
         ...style,
+        ...(active ? styles.markActive : {}),
+        ...styles.mark,
       }}
       onMouseDown={(e) => {
         e.stopPropagation();

src/Steps/Dot.tsx

@@ -1,7 +1,7 @@
+import cls from 'classnames';
 import * as React from 'react';
-import classNames from 'classnames';
-import { getDirectionStyle } from '../util';
 import SliderContext from '../context';
+import { getDirectionStyle } from '../util';
 
 export interface DotProps {
   prefixCls: string;
@@ -12,7 +12,7 @@ export interface DotProps {
 
 export default function Dot(props: DotProps) {
   const { prefixCls, value, style, activeStyle } = props;
-  const { min, max, direction, included, includedStart, includedEnd } =
+  const { min, max, direction, included, includedStart, includedEnd, styles, classNames } =
     React.useContext(SliderContext);
 
   const dotClassName = `${prefixCls}-dot`;
@@ -22,20 +22,27 @@ export default function Dot(props: DotProps) {
   let mergedStyle = {
     ...getDirectionStyle(direction, value, min, max),
     ...(typeof style === 'function' ? style(value) : style),
+    ...styles.dot,
   };
 
   if (active) {
     mergedStyle = {
       ...mergedStyle,
       ...(typeof activeStyle === 'function' ? activeStyle(value) : activeStyle),
+      ...styles.dotActive,
     };
   }
 
   return (
     <span
-      className={classNames(dotClassName, {
-        [`${dotClassName}-active`]: active,
-      })}
+      className={cls(
+        dotClassName,
+        {
+          [`${dotClassName}-active`]: active,
+        },
+        active && classNames.dotActive,
+        classNames.dot,
+      )}
       style={mergedStyle}
     />
   );

src/interface.ts

@@ -2,11 +2,23 @@ import type React from 'react';
 
 export type Direction = 'rtl' | 'ltr' | 'ttb' | 'btt';
 
-export type OnStartMove = (e: React.MouseEvent | React.TouchEvent, valueIndex: number, startValues?: number[]) => void;
+export type OnStartMove = (
+  e: React.MouseEvent | React.TouchEvent,
+  valueIndex: number,
+  startValues?: number[],
+) => void;
 
 export type AriaValueFormat = (value: number) => string;
 
-export type SemanticName = 'tracks' | 'track' | 'rail' | 'handle';
+export type SemanticName =
+  | 'tracks'
+  | 'track'
+  | 'rail'
+  | 'handle'
+  | 'dot'
+  | 'dotActive'
+  | 'mark'
+  | 'markActive';
 
 export type SliderClassNames = Partial<Record<SemanticName, string>>;