[Feat]: slider缩略轴支持handleIcon形状，支持handleIconType或者handleIconShape

[claireliumo]

Describe the feature / 功能描述

2.x不支持自定义slider handleIcon，导致改个icon要重写整个slider。期望早日上线。。

Are you willing to contribute? / 是否愿意参与贡献？

✅ Yes / 是

[github-actions[bot]]

@claireliumo 您好！以下是关于您问题的自动回复：

您好，感谢您的反馈和建议！

关于 “slider 缩略轴支持 handleIcon 形状，支持 handleIconType 或 handleIconShape” 的需求，我们已收到并理解您的痛点。当前 2.x 版本确实不支持直接自定义 slider 的 handle icon，需要重写整个 slider 组件才能更换 icon，影响开发效率和灵活性。

现有进展与建议

1. 目前支持情况：
目前 G2 的 slider 组件在配置项中只支持部分 handle 样式（如颜色、大小、阴影等），但不支持自定义 handle icon 的形状或类型（如自定义 SVG/path/icon）。

2. 预期方案：
我们建议后续在 slider 组件的配置中，增加如下属性：

• handleIconType 或 handleIconShape：支持输入内置类型（如 circle、rect、triangle），或自定义 SVG 路径，便于灵活扩展。
• 兼容现有样式属性（如 fill、stroke、size 等），同时允许开发者注册自定义形状或图标。

3. 可能的 API 草案示例：

chart.options({
  slider: {
    x: {
      style: {
        // 现有属性
        handleIconSize: 24,
        handleIconFill: '#1890ff',
        // 新增属性
        handleIconType: 'triangle', // 或 'rect'/'circle'，后续也可扩展为自定义函数
        // 或直接提供 SVG path
        // handleIconShape: 'M0,0L10,0L5,10Z',
      },
    },
  },
});

4. 现有可用扩展方案：
如需进一步自定义，可以参考 G2 的 自定义 Shape 注册机制，实现自定义绘制逻辑：

import { register } from '@antv/g2';

// 注册自定义 handle shape
register('shape.sliderHandle.triangle', (style, context) => {
  const { document } = context;
  return document.createElement('path', {
    style: { d: 'M0,0L10,0L5,10Z', ...style },
  });
});

然后在 slider 配置中引用自定义 shape。

---

贡献与后续跟进

• 非常欢迎您的参与和 PR 贡献！如有具体实现方案或设计建议，欢迎直接提交 PR 或回复本 issue，我们会第一时间 review。
• 该需求已经列入我们的功能排期，后续进展会在此 issue 更新。

---

再次感谢您的建议和支持！如果有更多自定义需求或使用场景，欢迎继续反馈。

—— G2 团队

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[interstellarmt]

这个现在是支持的，我补充一下文档吧，

实现方式参考一下以下代码：

import { Chart } from '@antv/g2';

import { Circle } from '@antv/g';

const chart = new Chart({ container: 'container' });

chart.options({
  type: 'line',
  data: {
    type: 'fetch',
    value: 'https://assets.antv.antgroup.com/g2/aapl.json',
  },
  encode: {
    x: 'date',
    y: 'close',
  },
  slider: {
    x: {
      style: {
        // 自定义 handleIcon 形状
        handleIconShape: (type) => {
          console.log('handleIconShape 被调用！type:', type);
          return new Circle({
            style: {
              r: 8,
              fill: type === 'start' ? '#FF6B9D' : '#00D9FF',
              stroke: '#fff',
              lineWidth: 2,
              shadowColor: type === 'start' ? '#FF6B9D' : '#00D9FF',
              shadowBlur: 10,
            },
          });
        },
        handleIconSize: 16,
      },
    },
  },
});

chart.render();

[interstellarmt]

文档已更新