diff --git a/src/component/dataZoom/SliderZoomModel.ts b/src/component/dataZoom/SliderZoomModel.ts
index e5b1e85724..c102947331 100644
--- a/src/component/dataZoom/SliderZoomModel.ts
+++ b/src/component/dataZoom/SliderZoomModel.ts
@@ -24,7 +24,8 @@ import {
     LineStyleOption,
     AreaStyleOption,
     ItemStyleOption,
-    LabelOption
+    LabelOption,
+    SeriesSamplingOptionMixin
 } from '../../util/types';
 import { inheritDefaultOption } from '../../util/component';
 
@@ -32,7 +33,10 @@ interface SliderHandleLabelOption {
     show?: boolean
 }
 
-export interface SliderDataZoomOption extends DataZoomOption, BoxLayoutOptionMixin {
+export interface SliderDataZoomOption extends
+    DataZoomOption,
+    BoxLayoutOptionMixin,
+    SeriesSamplingOptionMixin {
 
     show?: boolean
     /**
@@ -217,8 +221,10 @@ class SliderZoomModel extends DataZoomModel<SliderDataZoomOption> {
             moveHandleStyle: {
                 color: '#8FB0F7'
             }
-        }
+        },
+
+        sampling: 'none'
     } as SliderDataZoomOption);
 }
 
-export default SliderZoomModel;
\ No newline at end of file
+export default SliderZoomModel;
diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts
index 4c1a66e83a..6db70d1070 100644
--- a/src/component/dataZoom/SliderZoomView.ts
+++ b/src/component/dataZoom/SliderZoomView.ts
@@ -43,6 +43,7 @@ import { PointLike } from 'zrender/src/core/Point';
 import Displayable from 'zrender/src/graphic/Displayable';
 import {createTextStyle} from '../../label/labelStyle';
 import SeriesData from '../../data/SeriesData';
+import { doDataSampling } from '../../processor/dataSample';
 
 const Rect = graphic.Rect;
 
@@ -393,10 +394,34 @@ class SliderZoomView extends DataZoomView {
             // Optimize for large data shadow
             const stride = Math.round(data.count() / size[0]);
             let lastIsEmpty: boolean;
-            data.each([otherDim], function (value: ParsedValue, index) {
-                if (stride > 0 && (index % stride)) {
-                    thisCoord += step;
-                    return;
+
+            const coordSys = seriesModel.coordinateSystem;
+            const sampling = this.dataZoomModel.get('sampling');
+            let sampledData = data;
+
+            let useOldSampling = true;
+            if (data.count() > 10 && coordSys.type === 'cartesian2d' && (sampling && sampling !== 'none')) {
+                const downsampled = doDataSampling(
+                    data,
+                    sampling,
+                    seriesModel.coordinateSystem,
+                    this.api.getDevicePixelRatio()
+                );
+                if (downsampled) {
+                    useOldSampling = false;
+                    sampledData = downsampled;
+                }
+            }
+
+            sampledData.each([otherDim], function (value: ParsedValue, index) {
+                if (useOldSampling) {
+                    if (stride > 0 && (index % stride)) {
+                        thisCoord += step;
+                        return;
+                    }
+                }
+                else {
+                    thisCoord = index;
                 }
 
                 // FIXME
diff --git a/src/processor/dataSample.ts b/src/processor/dataSample.ts
index 3c19572e9a..5a2af4b60e 100644
--- a/src/processor/dataSample.ts
+++ b/src/processor/dataSample.ts
@@ -21,6 +21,8 @@ import { StageHandler, SeriesOption, SeriesSamplingOptionMixin } from '../util/t
 import { Dictionary } from 'zrender/src/core/types';
 import SeriesModel from '../model/Series';
 import { isFunction, isString } from 'zrender/src/core/util';
+import SeriesData from '../data/SeriesData';
+import { CoordinateSystem } from '../coord/CoordinateSystem';
 
 
 type Sampler = (frame: ArrayLike<number>) => number;
@@ -72,6 +74,47 @@ const indexSampler = function (frame: ArrayLike<number>) {
     return Math.round(frame.length / 2);
 };
 
+export function doDataSampling(
+    data: SeriesData,
+    sampling: SeriesSamplingOptionMixin['sampling'],
+    coordSys: CoordinateSystem,
+    dpr: number
+) {
+    const count = data.count();
+    // Only cartesian2d support down sampling. Disable it when there is few data.
+    if (count > 10 && coordSys.type === 'cartesian2d' && sampling) {
+        const baseAxis = coordSys.getBaseAxis();
+        const valueAxis = coordSys.getOtherAxis(baseAxis);
+        const extent = baseAxis.getExtent();
+        // Coordinste system has been resized
+        const size = Math.abs(extent[1] - extent[0]) * (dpr || 1);
+        const rate = Math.round(count / size);
+
+        if (isFinite(rate) && rate > 1) {
+            if (sampling === 'lttb') {
+                return data.lttbDownSample(data.mapDimension(valueAxis.dim), 1 / rate);
+            }
+            else if (sampling === 'minmax') {
+                return data.minmaxDownSample(data.mapDimension(valueAxis.dim), 1 / rate);
+            }
+            let sampler;
+            if (isString(sampling)) {
+                sampler = samplers[sampling];
+            }
+            else if (isFunction(sampling)) {
+                sampler = sampling;
+            }
+            if (sampler) {
+                // Only support sample the first dim mapped from value axis.
+                return data.downSample(
+                    data.mapDimension(valueAxis.dim), 1 / rate, sampler, indexSampler
+                );
+            }
+        }
+    }
+    return null;
+}
+
 export default function dataSample(seriesType: string): StageHandler {
     return {
 
@@ -84,38 +127,10 @@ export default function dataSample(seriesType: string): StageHandler {
             const data = seriesModel.getData();
             const sampling = seriesModel.get('sampling');
             const coordSys = seriesModel.coordinateSystem;
-            const count = data.count();
-            // Only cartesian2d support down sampling. Disable it when there is few data.
-            if (count > 10 && coordSys.type === 'cartesian2d' && sampling) {
-                const baseAxis = coordSys.getBaseAxis();
-                const valueAxis = coordSys.getOtherAxis(baseAxis);
-                const extent = baseAxis.getExtent();
-                const dpr = api.getDevicePixelRatio();
-                // Coordinste system has been resized
-                const size = Math.abs(extent[1] - extent[0]) * (dpr || 1);
-                const rate = Math.round(count / size);
-
-                if (isFinite(rate) && rate > 1) {
-                    if (sampling === 'lttb') {
-                        seriesModel.setData(data.lttbDownSample(data.mapDimension(valueAxis.dim), 1 / rate));
-                    }
-                    else if (sampling === 'minmax') {
-                        seriesModel.setData(data.minmaxDownSample(data.mapDimension(valueAxis.dim), 1 / rate));
-                    }
-                    let sampler;
-                    if (isString(sampling)) {
-                        sampler = samplers[sampling];
-                    }
-                    else if (isFunction(sampling)) {
-                        sampler = sampling;
-                    }
-                    if (sampler) {
-                        // Only support sample the first dim mapped from value axis.
-                        seriesModel.setData(data.downSample(
-                            data.mapDimension(valueAxis.dim), 1 / rate, sampler, indexSampler
-                        ));
-                    }
-                }
+            const dpr = api.getDevicePixelRatio();
+            const resampled = doDataSampling(data, sampling, coordSys, dpr);
+            if (resampled) {
+                seriesModel.setData(resampled);
             }
         }
     };
diff --git a/test/dataZoom-sampling.html b/test/dataZoom-sampling.html
new file mode 100644
index 0000000000..67a90a9724
--- /dev/null
+++ b/test/dataZoom-sampling.html
@@ -0,0 +1,105 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="./lib/simpleRequire.js"></script>
+    <script src="./lib/config.js"></script>
+    <script src="./lib/testHelper.js"></script>
+    <link rel="stylesheet" href="./lib/reset.css">
+</head>
+<body>
+    <div id="main0"></div>
+    <div id="main1"></div>
+    <div id="main2"></div>
+    <div id="main3"></div>
+    <div id="main4"></div>
+    <div id="main5"></div>
+    <div id="main6"></div>
+    <script>
+        // some input data
+        let data = [];
+        for (let i = 1; i < 20000; i++) {
+            data.push([i, Math.sin((i / 5) * Math.PI)]);
+        }
+
+        require([
+            'echarts'
+        ], function (echarts) {
+            [{
+                div: 'main0',
+                title: 'dataZoom without sampling (default value of "none", showes zig-zag shape)',
+            }, {
+                div: 'main1',
+                sampling: 'min',
+            }, {
+                div: 'main2',
+                sampling: 'max',
+            }, {
+                div: 'main3',
+                sampling: 'minmax',
+            }, {
+                div: 'main4',
+                sampling: 'average',
+            }, {
+                div: 'main5',
+                sampling: 'sum',
+            }, {
+                div: 'main6',
+                sampling: 'lttb',
+            }].forEach(({div, sampling, title}) => {
+                if (!title) {
+                    title = `dataZoom with sampling = "${sampling}"`;
+                }
+
+                option = {
+                    xAxis: {},
+                    yAxis: {},
+                    dataZoom: [
+                        {
+                            start: 0,
+                            end: 5,
+                            sampling,
+                        }
+                    ],
+                    series: [
+                        {
+                            type: 'line',
+                            symbol: 'none',
+                            data: data
+                        }
+                    ]
+                };
+
+                chart = testHelper.create(echarts, div, {
+                    title,
+                    option,
+                    height: 400,
+                    width: 680,
+                });
+
+            });
+        });
+    </script>
+</body>
+
+</html>