docs: 🎬 fix Grid demo slider tooltip

close #23768

components/grid/demo/playground.md

@@ -16,30 +16,26 @@ A simple playground for column count and gutter.
 ```jsx
 import { Row, Col, Slider } from 'antd';
 
-class App extends React.Component {
-  gutters = {};
-
-  vgutters = {};
-
-  colCounts = {};
+const gutters = {};
+const vgutters = {};
+const colCounts = {};
+
+[8, 16, 24, 32, 40, 48].forEach((value, i) => {
+  gutters[i] = value;
+});
+[8, 16, 24, 32, 40, 48].forEach((value, i) => {
+  vgutters[i] = value;
+});
+[2, 3, 4, 6, 8, 12].forEach((value, i) => {
+  colCounts[i] = value;
+});
 
-  constructor() {
-    super();
-    this.state = {
-      gutterKey: 1,
-      vgutterKey: 1,
-      colCountKey: 2,
-    };
-    [8, 16, 24, 32, 40, 48].forEach((value, i) => {
-      this.gutters[i] = value;
-    });
-    [8, 16, 24, 32, 40, 48].forEach((value, i) => {
-      this.vgutters[i] = value;
-    });
-    [2, 3, 4, 6, 8, 12].forEach((value, i) => {
-      this.colCounts[i] = value;
-    });
-  }
+class App extends React.Component {
+  state = {
+    gutterKey: 1,
+    vgutterKey: 1,
+    colCountKey: 2,
+  };
 
   onGutterChange = gutterKey => {
     this.setState({ gutterKey });
@@ -56,7 +52,7 @@ class App extends React.Component {
   render() {
     const { gutterKey, vgutterKey, colCountKey } = this.state;
     const cols = [];
-    const colCount = this.colCounts[colCountKey];
+    const colCount = colCounts[colCountKey];
     let colCode = '';
     for (let i = 0; i < colCount; i++) {
       cols.push(
@@ -72,39 +68,42 @@ class App extends React.Component {
         <div style={{ width: '50%' }}>
           <Slider
             min={0}
-            max={Object.keys(this.gutters).length - 1}
+            max={Object.keys(gutters).length - 1}
             value={gutterKey}
             onChange={this.onGutterChange}
-            marks={this.gutters}
+            marks={gutters}
             step={null}
+            tipFormatter={value => gutters[value]}
           />
         </div>
         <span style={{ marginRight: 6 }}>Vertical Gutter (px): </span>
         <div style={{ width: '50%' }}>
           <Slider
             min={0}
-            max={Object.keys(this.vgutters).length - 1}
+            max={Object.keys(vgutters).length - 1}
             value={vgutterKey}
             onChange={this.onVGutterChange}
-            marks={this.vgutters}
+            marks={vgutters}
             step={null}
+            tipFormatter={value => vgutters[value]}
           />
         </div>
         <span style={{ marginRight: 6 }}>Column Count:</span>
         <div style={{ width: '50%', marginBottom: 48 }}>
           <Slider
             min={0}
-            max={Object.keys(this.colCounts).length - 1}
+            max={Object.keys(colCounts).length - 1}
             value={colCountKey}
             onChange={this.onColCountChange}
-            marks={this.colCounts}
+            marks={colCounts}
             step={null}
+            tipFormatter={value => colCounts[value]}
           />
         </div>
-        <Row gutter={[this.gutters[gutterKey], this.vgutters[vgutterKey]]}>{cols}</Row>
-        <Row gutter={[this.gutters[gutterKey], this.vgutters[vgutterKey]]}>{cols}</Row>
-        <pre className="demo-code">{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
-        <pre className="demo-code">{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
+        <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
+        <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
+        <pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
+        <pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
       </>
     );
   }