feat: animated slider

src/components/slider/index.tsx

@@ -22,6 +22,11 @@ type SliderProps = Omit<ComponentPropsWithoutRef<typeof RSlider.Root>, 'classNam
   notches?: NotchPlacement;
   /** Thumb shape. `'square'` (default) has a small border-radius; `'round'` is a full circle. */
   knobStyle?: KnobStyle;
+  /**
+   * Enable step-glide animation. Defaults to `true` when `marks` is set, `false` otherwise.
+   * Explicitly setting this always overrides the default.
+   */
+  animated?: boolean;
   className?: string;
 };
 
@@ -73,6 +78,7 @@ export const Slider = ({
   marks,
   notches = 'bottom',
   knobStyle = 'square',
+  animated,
   min = 0,
   max = 100,
   step = 1,
@@ -84,10 +90,12 @@ export const Slider = ({
   const hasLabels = resolved.some((m) => m.label != null);
   const showTop = hasMarks && (notches === 'top' || notches === 'both');
   const showBottom = hasMarks && (notches === 'bottom' || notches === 'both');
+  const isAnimated = animated !== undefined ? animated : hasMarks;
 
   const cls = [
     'modern-sk-slider',
     `modern-sk-slider--knob-${knobStyle}`,
+    isAnimated && 'modern-sk-slider--animated',
     hasMarks && 'modern-sk-slider--has-marks',
     hasLabels && 'modern-sk-slider--has-labels',
     showTop && 'modern-sk-slider--notch-top',