[Feature] Add a draggable icon below the slider to adjust the view.

### What problem does this feature solve?

When the minimum and maximum values of the data differ greatly, if we zoom in on the chart (dataZoom in), the slider below becomes very small, making it difficult for users to click or move the handle area.

after Data Zoom In

### Is it possible to add a small ball below, allowing users to drag it left or right to move the chart, but only for moving (not for zooming in or out)?

```js
// options

{
tooltip: {
triggerOn: 'mousemove|click',
// hideDelay: 1e3,
// alwaysShowContent: true,
enterable: true,
formatter: (params: any) => {
return renderUserRevenueString(params?.data?.[3]);
},
confine: true,
},
xAxis: {
type: isLog ? 'log' : 'value',
axisLine: {
show: false,
},
splitLine: {
show: false,
},
},
yAxis: {
type: 'category',
data: yAxisData,
axisLabel: {
formatter: (value: string) => `VIP ${value}`,
},
axisTick: { show: true, alignWithLabel: false },
splitLine: { show: true },
boundaryGap: false,
offset: 10,
axisLine: {
show: false,
},
},
series: [
{
name: 'Top10%',
type: 'scatter',
data: chartData.filter((item) => item[2] === CategoryEnum.top10),
itemStyle: { color: '#FFE539' },
symbolSize: 15,
},
{
name: 'Top10-25%',
type: 'scatter',
data: chartData.filter((item) => item[2] === CategoryEnum.top25),
itemStyle: { color: '#F0B600' },
symbolSize: 15,
},
{
name: 'Average',
type: 'scatter',
data: chartData.filter((item) => item[2] === CategoryEnum.average),
itemStyle: { color: '#FF9B36' },
symbolSize: 15,
},
{
name: 'Bottom25%',
type: 'scatter',
data: chartData.filter((item) => item[2] === CategoryEnum.bottom25),
itemStyle: { color: '#DA6E15' },
symbolSize: 15,
},
],
dataZoom: [
{
type: 'slider',
height: 40,
bottom: 10,
width: '85%',
left: 'center',
handleSize: 30,
fillerColor: 'rgba(167,183,204,0.4)',
borderColor: '#ddd',
handleIcon:
'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
moveHandleSize: 60,
brushSelect: false,
throttle: 100,
labelFormatter: '',
},
{
type: 'inside',
xAxisIndex: 0,
orient: 'horizontal',
zoomOnMouseWheel: 'ctrl',
moveOnMouseWheel: 'shift',
moveOnMouseMove: 'shift',
yAxisIndex: 'none',
},
],
grid: {
left: 60,
width: 'auto',
},
legend: {
data: ['Top10%', 'Top10-25%', 'Average', 'Bottom25%'],
top: 10,
right: 10,
},
toolbox: {
orient: 'horizontal',
top: 20,
left: 0,
feature: {
dataZoom: {
yAxisIndex: 'none',
emphasis: {
iconStyle: {
borderColor: '#0050b3',
color: '#0050b3',
},
},
},
restore: {}
},
},
};

```

### What does the proposed API look like?

```js
//options

{
// ...
dataZoom: [
{
type: 'slider',
moveHandleIconPlacement: 'bottom', // Place the move handle icon below the slider for easier horizontal dragging
// ... other config ...
}
],
// ...
}

chart.setOption(options)

```