diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index ea90af461c..48ce97f7a1 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1314,6 +1314,9 @@ export default {
     analyse_cfg: 'Analyse',
     slider: 'Slider',
     slider_range: 'Range',
+    slider_bg: 'Background',
+    slider_fill_bg: 'Selected Background',
+    slider_text_color: 'Font Color',
     chart_no_senior: 'This chart type not support senior config,please look forward to.',
     chart_no_properties: 'This chart type not support properties config.',
     assist_line: 'Assist Line',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index cb6c2df8eb..5df944cb3b 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1314,6 +1314,9 @@ export default {
     analyse_cfg: '分析預警',
     slider: '縮略軸',
     slider_range: '默認範圍',
+    slider_bg: '背景',
+    slider_fill_bg: '選中背景',
+    slider_text_color: '字體顏色',
     chart_no_senior: '當前圖表類型暫無高級配置，敬請期待',
     chart_no_properties: '當前圖表類型暫無样式配置.',
     assist_line: '輔助線',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 511dba8785..5a2bf46a75 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1313,6 +1313,9 @@ export default {
     analyse_cfg: '分析预警',
     slider: '缩略轴',
     slider_range: '默认范围',
+    slider_bg: '背景',
+    slider_fill_bg: '选中背景',
+    slider_text_color: '字体颜色',
     chart_no_senior: '当前图表类型暂无高级配置，敬请期待',
     chart_no_properties: '当前图表类型暂无样式配置',
     assist_line: '辅助线',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 65eea85321..43548d3e71 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -382,7 +382,10 @@ export const DEFAULT_SPLIT = {
 }
 export const DEFAULT_FUNCTION_CFG = {
   sliderShow: false,
-  sliderRange: [0, 10]
+  sliderRange: [0, 10],
+  sliderBg: '#FFFFFF',
+  sliderFillBg: '#BCD6F1',
+  sliderTextClolor: '#999999'
 }
 export const DEFAULT_THRESHOLD = {
   gaugeThreshold: '',
diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js
index ccb98c70d6..38a601ce2a 100644
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
@@ -192,6 +192,16 @@ export function componentStyle(chart_option, chart) {
   }
 }
 
+const hexToRgba = (hex, opacity) => {
+  let rgbaColor = ''
+  const reg = /^#[\da-f]{6}$/i
+  if (reg.test(hex)) {
+    rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
+      '0x' + hex.slice(3, 5)
+    )},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
+  }
+  return rgbaColor
+}
 export function seniorCfg(chart_option, chart) {
   if (chart.senior && chart.type && (chart.type.includes('bar') || chart.type.includes('line') || chart.type.includes('mix'))) {
     const senior = JSON.parse(chart.senior)
@@ -209,6 +219,26 @@ export function seniorCfg(chart_option, chart) {
             end: parseInt(senior.functionCfg.sliderRange[1])
           }
         ]
+        if (senior.functionCfg.sliderBg) {
+          chart_option.dataZoom[1].dataBackground = {
+            lineStyle: { color: reverseColor(senior.functionCfg.sliderBg), opacity: 0.3 },
+            areaStyle: { color: reverseColor(senior.functionCfg.sliderBg), opacity: 0.1 }
+          }
+        }
+        if (senior.functionCfg.sliderFillBg) {
+          chart_option.dataZoom[1].selectedDataBackground = {
+            lineStyle: { color: senior.functionCfg.sliderFillBg },
+            areaStyle: { color: senior.functionCfg.sliderFillBg }
+          }
+          const rgba = hexToRgba(senior.functionCfg.sliderFillBg, 0.5)
+          chart_option.dataZoom[1].fillerColor = rgba
+        }
+        if (senior.functionCfg.sliderTextClolor) {
+          chart_option.dataZoom[1].textStyle = { color: senior.functionCfg.sliderTextClolor }
+          const rgba = hexToRgba(senior.functionCfg.sliderTextClolor, 0.5)
+          chart_option.dataZoom[1].handleStyle = { color: rgba }
+        }
+
         if (chart.type.includes('horizontal')) {
           chart_option.dataZoom[0].yAxisIndex = [0]
           chart_option.dataZoom[1].yAxisIndex = [0]
diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js
index 9c736d0d8e..d67c066803 100644
--- a/frontend/src/views/chart/chart/common/common_antv.js
+++ b/frontend/src/views/chart/chart/common/common_antv.js
@@ -636,6 +636,31 @@ export function getSlider(chart) {
           start: parseInt(senior.functionCfg.sliderRange[0]) / 100,
           end: parseInt(senior.functionCfg.sliderRange[1]) / 100
         }
+
+        if (senior.functionCfg.sliderBg) {
+          cfg.backgroundStyle = {
+            fill: senior.functionCfg.sliderBg,
+            stroke: senior.functionCfg.sliderBg,
+            lineWidth: 1,
+            strokeOpacity: 0.5
+          }
+        }
+        if (senior.functionCfg.sliderFillBg) {
+          cfg.foregroundStyle = {
+            'fill': senior.functionCfg.sliderFillBg,
+            'fillOpacity': 0.5
+          }
+        }
+        if (senior.functionCfg.sliderTextClolor) {
+          cfg.textStyle = {
+            'fill': senior.functionCfg.sliderTextClolor
+          }
+          cfg.handlerStyle = {
+            'fill': senior.functionCfg.sliderTextClolor,
+            'fillOpacity': 0.5,
+            'highLightFill': senior.functionCfg.sliderTextClolor
+          }
+        }
       }
     }
   }
diff --git a/frontend/src/views/chart/components/senior/FunctionCfg.vue b/frontend/src/views/chart/components/senior/FunctionCfg.vue
index 1ed5249cf0..b3f4920542 100644
--- a/frontend/src/views/chart/components/senior/FunctionCfg.vue
+++ b/frontend/src/views/chart/components/senior/FunctionCfg.vue
@@ -8,13 +8,22 @@
         <el-form-item v-show="functionForm.sliderShow" :label="$t('chart.slider_range')+'(%)'" class="form-item form-item-slider">
           <el-slider v-model="functionForm.sliderRange" style="width: 90%" :min="0" :max="100" input-size="mini" range @change="changeFunctionCfg" />
         </el-form-item>
+        <el-form-item v-show="functionForm.sliderShow" :label="$t('chart.slider_bg')" class="form-item">
+          <el-color-picker v-model="functionForm.sliderBg" class="color-picker-style" :predefine="predefineColors" @change="changeFunctionCfg" />
+        </el-form-item>
+        <el-form-item v-show="functionForm.sliderShow" :label="$t('chart.slider_fill_bg')" class="form-item">
+          <el-color-picker v-model="functionForm.sliderFillBg" class="color-picker-style" :predefine="predefineColors" @change="changeFunctionCfg" />
+        </el-form-item>
+        <el-form-item v-show="functionForm.sliderShow" :label="$t('chart.slider_text_color')" class="form-item">
+          <el-color-picker v-model="functionForm.sliderTextClolor" class="color-picker-style" :predefine="predefineColors" @change="changeFunctionCfg" />
+        </el-form-item>
       </el-form>
     </el-col>
   </div>
 </template>
 
 <script>
-import { DEFAULT_FUNCTION_CFG } from '../../chart/chart'
+import { DEFAULT_FUNCTION_CFG, COLOR_PANEL } from '../../chart/chart'
 
 export default {
   name: 'FunctionCfg',
@@ -26,7 +35,8 @@ export default {
   },
   data() {
     return {
-      functionForm: JSON.parse(JSON.stringify(DEFAULT_FUNCTION_CFG))
+      functionForm: JSON.parse(JSON.stringify(DEFAULT_FUNCTION_CFG)),
+      predefineColors: COLOR_PANEL
     }
   },
   watch: {