diff --git a/src/component/dataZoom/SliderZoomModel.ts b/src/component/dataZoom/SliderZoomModel.ts
index 26d755fe32..e5b1e85724 100644
--- a/src/component/dataZoom/SliderZoomModel.ts
+++ b/src/component/dataZoom/SliderZoomModel.ts
@@ -28,6 +28,10 @@ import {
 } from '../../util/types';
 import { inheritDefaultOption } from '../../util/component';
 
+interface SliderHandleLabelOption {
+    show?: boolean
+}
+
 export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMixin {
 
     show?: boolean
@@ -79,7 +83,7 @@ export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMix
 
     handleIcon?: string
 
-    handleLabelShow?: boolean
+    handleLabel?: SliderHandleLabelOption
 
     /**
      * number: height of icon. width will be calculated according to the aspect of icon.
@@ -119,7 +123,7 @@ export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMix
     brushStyle?: ItemStyleOption
 
     emphasis?: {
-        handleLabelShow?: boolean
+        handleLabel: SliderHandleLabelOption
         handleStyle?: ItemStyleOption
         moveHandleStyle?: ItemStyleOption
     }
@@ -174,7 +178,6 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
         // Color of selected window.
         fillerColor: 'rgba(135,175,274,0.2)',
         handleIcon: 'path://M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z',
-        handleLabelShow: false,
         // Percent of the slider height
         handleSize: '100%',
 
@@ -205,7 +208,9 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
         },
 
         emphasis: {
-            handleLabelShow: true,
+            handleLabel: {
+                show: true
+            },
             handleStyle: {
                 borderColor: '#8FB0F7'
             },
diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index 5647ffdeb5..4c1a66e83a 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -619,7 +619,8 @@ class SliderZoomView extends DataZoomView {
             sliderGroup.add(handles[handleIndex] = path);
 
             const textStyleModel = dataZoomModel.getModel('textStyle');
-            const handleLabelShow = dataZoomModel.get('handleLabelShow');
+            const handleLabel = dataZoomModel.get('handleLabel') || {};
+            const handleLabelShow = handleLabel.show || false;
 
             thisGroup.add(
                 handleLabels[handleIndex] = new graphic.Text({
@@ -889,9 +890,10 @@ class SliderZoomView extends DataZoomView {
      * @param isEmphasis true: show, false: hide
      */
     private _showDataInfo(isEmphasis?: boolean) {
-        const normalShow = this.dataZoomModel.get('handleLabelShow');
-        const emphasisShow = this.dataZoomModel.getModel('emphasis')
-            .get('handleLabelShow');
+        const handleLabel = this.dataZoomModel.get('handleLabel') || {};
+        const normalShow = handleLabel.show || false;
+        const emphasisHandleLabel = this.dataZoomModel.getModel(['emphasis', 'handleLabel']);
+        const emphasisShow = emphasisHandleLabel.get('show') || false;
         // Dragging is considered as emphasis, unless emphasisShow is false
         const toShow = (isEmphasis || this._dragging)
             ? emphasisShow
diff --git a/test/dataZoom-handleLabelShow.html b/test/dataZoom-handleLabelShow.html
index 2454c5a373..f37b72be02 100644
--- a/test/dataZoom-handleLabelShow.html
+++ b/test/dataZoom-handleLabelShow.html
@@ -64,18 +64,22 @@
                 },
                 dataZoom: [{
                     type: 'slider',
-                    handleLabelShow: true
+                    handleLabel: {
+                        show: true
+                    }
                 }, {
                     type: 'slider',
                     yAxisIndex: 0,
-                    handleLabelShow: true,
+                    handleLabel: {
+                        show: true
+                    },
                     right: 30
                 }]
             };
 
             var chart = testHelper.create(echarts, 'main0', {
                 title: [
-                    'handleLabelShow: true, (emphasis.handleLabelShow: true)',
+                    'handleLabel.show: true, (emphasis.handleLabel.show: true)',
                     'Always show the handle label.'
                 ],
                 option: option
@@ -83,126 +87,146 @@
         });
         </script>
 
-<script>
-    require([
-        'echarts',
-        // 'map/js/china',
-        // './data/nutrients.json'
-    ], function (echarts) {
-        var option;
-
-        option = {
-            xAxis: {},
-            yAxis: {},
-            series: {
-                type: 'line',
-                data: [[11, 22], [33, 44]]
-            },
-            dataZoom: [{
-                type: 'slider',
-                handleLabelShow: true,
-                emphasis: {
-                    handleLabelShow: false
-                },
-            }, {
-                type: 'slider',
-                yAxisIndex: 0,
-                handleLabelShow: true,
-                emphasis: {
-                    handleLabelShow: false
-                },
-                right: 30
-            }]
-        };
-
-        var chart = testHelper.create(echarts, 'main1', {
-            title: [
-                'handleLabelShow: true, emphasis.handleLabelShow: false',
-                'Hide the handle label when mouse over, which may be useful to hide information when dragging so that user is more focused.'
-            ],
-            option: option
-        });
-    });
-    </script>
-
-
-<script>
-    require([
-        'echarts',
-        // 'map/js/china',
-        // './data/nutrients.json'
-    ], function (echarts) {
-        var option;
-
-        option = {
-            xAxis: {},
-            yAxis: {},
-            series: {
-                type: 'line',
-                data: [[11, 22], [33, 44]]
-            },
-            dataZoom: [{
-                type: 'slider',
-                handleLabelShow: false,
-            }, {
-                type: 'slider',
-                yAxisIndex: 0,
-                handleLabelShow: false,
-                right: 30
-            }]
-        };
-
-        var chart = testHelper.create(echarts, 'main2', {
-            title: [
-                'handleLabelShow: false, (emphasis.handleLabelShow: true)',
-                'Handle label is displayed whem hovering, which is the same as default.'
-            ],
-            option: option
-        });
-    });
-    </script>
-
-<script>
-    require([
-        'echarts',
-        // 'map/js/china',
-        // './data/nutrients.json'
-    ], function (echarts) {
-        var option;
-
-        option = {
-            xAxis: {},
-            yAxis: {},
-            series: {
-                type: 'line',
-                data: [[11, 22], [33, 44]]
-            },
-            dataZoom: [{
-                type: 'slider',
-                handleLabelShow: false,
-                emphasis: {
-                    handleLabelShow: false
-                },
-            }, {
-                type: 'slider',
-                yAxisIndex: 0,
-                handleLabelShow: false,
-                emphasis: {
-                    handleLabelShow: false
-                },
-                right: 30
-            }]
-        };
-
-        var chart = testHelper.create(echarts, 'main3', {
-            title: [
-                'handleLabelShow: false, emphasis.handleLabelShow: false',
-                'Never show the handle labels.'
-            ],
-            option: option
-        });
-    });
-    </script>
+        <script>
+            require([
+                'echarts',
+                // 'map/js/china',
+                // './data/nutrients.json'
+            ], function (echarts) {
+                var option;
+
+                option = {
+                    xAxis: {},
+                    yAxis: {},
+                    series: {
+                        type: 'line',
+                        data: [[11, 22], [33, 44]]
+                    },
+                    dataZoom: [{
+                        type: 'slider',
+                        handleLabel: {
+                            show: true
+                        },
+                        emphasis: {
+                            handleLabel: {
+                                show: false
+                            },
+                        },
+                    }, {
+                        type: 'slider',
+                        yAxisIndex: 0,
+                        handleLabel: {
+                            show: true
+                        },
+                        emphasis: {
+                            handleLabel: {
+                                show: false
+                            },
+                        },
+                        right: 30
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main1', {
+                    title: [
+                        'handleLabel.show: true, emphasis.handleLabel.show: false',
+                        'Hide the handle label when mouse over, which may be useful to hide information when dragging so that user is more focused.'
+                    ],
+                    option: option
+                });
+            });
+            </script>
+
+
+        <script>
+            require([
+                'echarts',
+                // 'map/js/china',
+                // './data/nutrients.json'
+            ], function (echarts) {
+                var option;
+
+                option = {
+                    xAxis: {},
+                    yAxis: {},
+                    series: {
+                        type: 'line',
+                        data: [[11, 22], [33, 44]]
+                    },
+                    dataZoom: [{
+                        type: 'slider',
+                        handleLabel: {
+                            show: false
+                        }
+                    }, {
+                        type: 'slider',
+                        yAxisIndex: 0,
+                        handleLabel: {
+                            show: false
+                        },
+                        right: 30
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main2', {
+                    title: [
+                        'handleLabel.show: false, (emphasis.handleLabel.show: true)',
+                        'Handle label is displayed whem hovering, which is the same as default.'
+                    ],
+                    option: option
+                });
+            });
+        </script>
+
+        <script>
+            require([
+                'echarts',
+                // 'map/js/china',
+                // './data/nutrients.json'
+            ], function (echarts) {
+                var option;
+
+                option = {
+                    xAxis: {},
+                    yAxis: {},
+                    series: {
+                        type: 'line',
+                        data: [[11, 22], [33, 44]]
+                    },
+                    dataZoom: [{
+                        type: 'slider',
+                        handleLabel: {
+                            show: false
+                        },
+                        emphasis: {
+                            handleLabel: {
+                                show: false
+                            },
+                        },
+                    }, {
+                        type: 'slider',
+                        yAxisIndex: 0,
+                        handleLabel: {
+                            show: false
+                        },
+                        emphasis: {
+                            handleLabel: {
+                                show: false
+                            },
+                        },
+                        right: 30
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main3', {
+                    title: [
+                        'handleLabel.show: false, emphasis.handleLabel.show: false',
+                        'Never show the handle labels.'
+                    ],
+                    option: option
+                });
+            });
+        </script>
     </body>
 </html>