G2 4.x 版本slider的handler编程性,并且颜色为红色

G2 4.x 版本中的 slider 组件可以通过修改样式来改变 handler 的颜色。以下是一个示例：

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

const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 },
];

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

chart.data(data);

chart.scale({
  value: {
    min: 0,
    max: 15,
  },
});

chart.line().position('year*value');

const slider = new Slider({
  container: 'container',
  width: 'auto',
  height: 26,
  start: 0,
  end: 1,
  data: data.map((d) => d.year),
  xAxis: 'year',
  yAxis: null,
  trendCfg: {
    isArea: false,
  },
  handleStyle: {
    color: 'red',
  },
});

slider.onSlideEnd((ev) => {
  const startYear = ev.startText;
  const endYear = ev.endText;
  chart.filter('year', (year) => year >= startYear && year <= endYear);
  chart.render();
});

chart.render();

在上面的代码中，我们通过 `handleStyle` 属性来设置 handler 的颜色为红色。如果要修改其他样式，可以通过修改 `handleStyle` 中的其他属性来实现。