Function SliderExampleScene

components/docs/examples/slider-example.tsx:21–57

(p: SliderExampleProps = {})

}

export const SliderExampleScene = (p: SliderExampleProps = {}) => {
  // Cursor: park top-left → ease to thumb (arrives frame 30) → drag to end (arrives frame 100) → release.
  const cursorStyle = useCursorPath([
    { at: 0, x: 80, y: 60 },
    { at: 30, x: THUMB_START_X, y: THUMB_Y, duration: 26 },
    { at: 44, x: THUMB_START_X, y: THUMB_Y, press: true, duration: 0 },
    { at: 100, x: THUMB_END_X, y: THUMB_Y, press: true, duration: 56 },
    { at: 108, x: THUMB_END_X, y: THUMB_Y, duration: 0 },
  ]);

  // Slider: dual-channel — value eases 20 → 80 during the drag; thumb idles → hover → press → idle.
  const sliderStyle = useSliderTransition([
    { at: 0, value: 20, thumbState: "idle" },
    { at: 30, thumbState: "hover", duration: 8 },
    { at: 44, thumbState: "press", duration: 6 },
    { at: 44, value: 20 },
    // Match the cursor's default inOut easing so the thumb tracks the cursor exactly.
    { at: 100, value: 80, duration: 56, easing: "inOut" },
    { at: 108, thumbState: "idle", duration: 8 },
  ]);

  return (
    <div style={{ position: "relative", width: "100%", height: "100%" }}>
      <div
        style={{
          position: "absolute",
          left: "50%",
          top: "50%",
          transform: "translate(-50%, -50%)",
        }}
      >
        <Slider
          style={sliderStyle}
          width={320}
          showValue={p.showValue ?? true}
        />
      </div>
      <Cursor style={cursorStyle} variant="pointer" />
    </div>
  );