Repository: ant-design
Issue: [Feature Request] AntDesign Slider > show the value of current mouse position
Labels: 💡 Feature Request,Inactive

### 这个功能解决了什么问题？

I want to show the current position of the mouse on the AntDesign Slider with its value on Tooltip.

is there any way to do this?
![StackOverflow](https://i.stack.imgur.com/8AukK.png)
I did create this Codesandbox for that https://codesandbox.io/s/prod-rgb-ncefp

### 你期望的 API 是怎样的？

```jsx
import React, { useState } from "react";
import styled from "styled-components";
import { Slider, Tooltip } from "antd";
import { CaretDownOutlined, CaretUpOutlined } from "@ant-design/icons";

const SingleLinePrice = styled.div`
  position: relative;
  .line {
    position: absolute;
    bottom: -8px;
    left: 50%;
    height: 8px;
    transform: translate(0, -50%);
    vertical-align: middle;
    border-left: 1px solid #333;
  }
`;

const RangeDiagram = React.memo((props) => {
  const [data] = useState({
    min: 18135,
    max: 20531,
    downPrice: 18661,
    upPrice: 19811,
    endPrice: 18742,
    lastPrice: 19432,
    linePrice: 19123
  });

  const formatter = (value) => {
    return <span>{value}</span>;
  };
  const marks = {
    [data.min]: {
      label: <span>{data.min}</span>
    },

    [data.downPrice]: {
      style: {
        top: "-14px"
      },
      label: (
        <Tooltip
          title={
            <>
              start: <span>{data.downPrice}</span>
            </>
          }
          placement="top"
        >
          <span style={{ opacity: 0 }}>D</span>
        </Tooltip>
      )
    },

    [data.linePrice]: {
      style: {
        top: "-35px"
      },
      label: (
        <SingleLinePrice>
          <div className="line" />
          <span>{data.linePrice}</span>
        </SingleLinePrice>
      )
    },

    [data.endPrice]: {
      style: {
        top: "-7px"
      },
      label: (
        <Tooltip
          title={
            <>
              end: <span>{data.lastPrice}</span>
            </>
          }
          placement="bottom"
        >
          <CaretUpOutlined />
        </Tooltip>
      )
    },
    [data.lastPrice]: {
      style: {
        top: "-30px"
      },
      label: (
        <Tooltip
          title={
            <>
              last: <span>{data.lastPrice}</span>
            </>
          }
          placement="top"
        >
          <CaretDownOutlined />
        </Tooltip>
      )
    },

    [data.upPrice]: {
      style: {
        top: "-14px"
      },
      label: (
        <Tooltip
          title={
            <>
              best: <span>{data.upPrice}</span>
            </>
          }
          placement="top"
        >
          <span style={{ opacity: 0 }}>U</span>
        </Tooltip>
      )
    },
    [data.max]: {
      label: <span>{data.max}</span>
    }
  };

  return (
    <div style={{ margin: 150 }}>
      <Slider
        tipFormatter={formatter}
        min={data.min}
        max={data.max}
        range={{ draggableTrack: true }}
        marks={marks}
        reverse
        value={[data.downPrice, data.upPrice]}
      />
    </div>
  );
});
export default RangeDiagram;

```

### 其他

<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->