feat(component): add custom props to Slider

packages/frontend/component/src/ui/slider/index.css.ts

@@ -1,16 +1,19 @@
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
-export const sliderContainerStyle = style({
-  position: 'relative',
-  width: '250px',
-  height: '16px',
-});
-
 export const trackStyle = style({
   width: '100%',
   height: '1px',
-  backgroundColor: cssVarV2('layer/border'),
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  padding: '12px 0',
+  cursor: 'pointer',
+});
+export const fakeTrackStyle = style({
+  width: '100%',
+  height: '1px',
+  backgroundColor: cssVarV2('layer/insideBorder/border'),
   position: 'relative',
   display: 'flex',
   justifyContent: 'space-between',
@@ -40,7 +43,7 @@ export const nodeStyle = style({
   width: '4px',
   height: '4px',
   border: '2px solid transparent',
-  backgroundColor: cssVarV2('layer/border'),
+  backgroundColor: cssVarV2('layer/insideBorder/border'),
   borderRadius: '50%',
   position: 'absolute',
   top: '50%',

packages/frontend/component/src/ui/slider/slider.stories.tsx

@@ -17,7 +17,8 @@ const Template: StoryFn<SliderProps> = args => {
 export const Default: StoryFn<SliderProps> = Template.bind(undefined);
 Default.args = {
   min: 0,
-  max: 100,
+  max: 10,
+  width: 500,
   step: 1,
-  nodes: [0, 50, 100],
+  nodes: [0, 5, 10],
 };

packages/frontend/component/src/ui/slider/slider.tsx

@@ -4,49 +4,72 @@ import { useRef } from 'react';
 import * as styles from './index.css';
 
 export interface SliderProps extends Sliders.SliderProps {
+  width?: number;
+  containerStyle?: React.CSSProperties;
+  rootStyle?: React.CSSProperties;
+  trackStyle?: React.CSSProperties;
+  rangeStyle?: React.CSSProperties;
+  thumbStyle?: React.CSSProperties;
+  noteStyle?: React.CSSProperties;
   nodes?: number[]; // The values where the nodes should be placed
 }
 
 export const Slider = ({
   value,
-  min,
-  max,
+  min = 0,
+  max = 10,
   step,
+  width = 250,
   nodes,
+  containerStyle,
+  rootStyle,
+  trackStyle,
+  rangeStyle,
+  thumbStyle,
+  noteStyle,
   ...props
 }: SliderProps) => {
   const sliderRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Sliders.Root
-      value={value}
-      min={min}
-      max={max}
-      step={step}
-      className={styles.sliderContainerStyle}
-      {...props}
-    >
-      <Sliders.Track className={styles.trackStyle} ref={sliderRef}>
-        <Sliders.Range className={styles.filledTrackStyle} />
-        {!!nodes &&
-          nodes.map((nodeValue, index) => (
-            <div
-              key={index}
-              className={styles.nodeStyle}
-              data-active={value && value[0] >= nodeValue}
-              style={{
-                left: `${((nodeValue - (min !== undefined ? min : 0)) / (max !== undefined ? max - (min !== undefined ? min : 0) : 1)) * 100}%`,
-                transform:
-                  index === 0
-                    ? 'translateY(-50%)'
-                    : index === nodes.length - 1
-                      ? 'translateY(-50%) translateX(-100%)'
-                      : undefined,
-              }}
+    <div style={{ ...containerStyle, width: width ? `${width}px` : undefined }}>
+      <Sliders.Root
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        style={rootStyle}
+        {...props}
+      >
+        <Sliders.Track className={styles.trackStyle} ref={sliderRef}>
+          <div className={styles.fakeTrackStyle} style={trackStyle}>
+            <Sliders.Range
+              className={styles.filledTrackStyle}
+              style={rangeStyle}
             />
-          ))}
-        <Sliders.Thumb className={styles.thumbStyle} />
-      </Sliders.Track>
-    </Sliders.Root>
+          </div>
+
+          {!!nodes &&
+            nodes.map((nodeValue, index) => (
+              <div
+                key={index}
+                className={styles.nodeStyle}
+                data-active={value && value[0] >= nodeValue}
+                style={{
+                  left: `${((nodeValue - (min !== undefined ? min : 0)) / (max !== undefined ? max - (min !== undefined ? min : 0) : 1)) * 100}%`,
+                  transform:
+                    index === 0
+                      ? 'translateY(-50%)'
+                      : index === nodes.length - 1
+                        ? 'translateY(-50%) translateX(-100%)'
+                        : undefined,
+                  ...noteStyle,
+                }}
+              />
+            ))}
+          <Sliders.Thumb className={styles.thumbStyle} style={thumbStyle} />
+        </Sliders.Track>
+      </Sliders.Root>
+    </div>
   );
 };