Improvement - Slicer - Improved styling

Author: graphieros

src/atoms/Slicer.vue

@@ -7,6 +7,10 @@ const props = defineProps({
         type: String,
         default: '#FFFFFF'
     },
+    borderColor: {
+        type: String,
+        default: '#FFFFFF'
+    },
     fontSize: {
         type: Number,
         default: 14
@@ -71,7 +75,8 @@ const highlightStyle = computed(() => {
 
 const slicerColor = computed(() => props.inputColor);
 const backgroundColor = computed(() => props.background);
-const selectColorOpaque = computed(() => `${props.selectColor}33`)
+const selectColorOpaque = computed(() => `${props.selectColor}33`);
+const borderColor = computed(() => props.borderColor);
 
 function reset() {
     emit('reset');
@@ -173,7 +178,7 @@ input[type="range"]::-webkit-slider-thumb {
     cursor: pointer;
     position: relative;
     z-index: 2;
-    outline: 2px solid v-bind(backgroundColor);
+    outline: 2px solid v-bind(borderColor);
     transition: all 0.2s ease-in-out;
     &:active,
     &:hover {
@@ -191,7 +196,7 @@ input[type="range"]::-moz-range-thumb {
     cursor: pointer;
     position: relative;
     z-index: 2;
-    outline: 2px solid v-bind(backgroundColor);
+    outline: 2px solid v-bind(borderColor);
     transition: all 0.2s ease-in-out;
     &:active,
     &:hover {
@@ -209,7 +214,7 @@ input[type="range"]::-ms-thumb {
     cursor: pointer;
     position: relative;
     z-index: 2;
-    outline: 2px solid v-bind(backgroundColor);
+    outline: 2px solid v-bind(borderColor);
     transition: all 0.2s ease-in-out;
     &:active,
     &:hover {
@@ -223,7 +228,7 @@ input[type="range"]::-ms-thumb {
     width: 99%;
     height: 8px;
     border-radius: 4px;
-    background: #ddd;
+    background: v-bind(backgroundColor);
     top: 8px;
     z-index: 1;
     left: 50%;

src/components/vue-ui-candlestick.vue

@@ -681,7 +681,8 @@ defineExpose({
 
         <Slicer v-if="candlestickConfig.style.zoom.show && isDataset"
             :key="`slicer_${slicerStep}`"
-            :background="candlestickConfig.style.backgroundColor"
+            :background="candlestickConfig.style.zoom.color"
+            :borderColor="candlestickConfig.style.backgroundColor"
             :fontSize="candlestickConfig.style.zoom.fontSize"
             :useResetSlot="candlestickConfig.style.zoom.useResetSlot"
             :labelLeft="dataset[slicer.start] ? dataset[slicer.start][0] : dataset[0][0]"

src/components/vue-ui-donut-evolution.vue

@@ -867,7 +867,8 @@ defineExpose({
         <Slicer
             v-if="maxLength > 1 && donutEvolutionConfig.style.chart.zoom.show"
             :key="`slicer_${slicerStep}`"
-            :background="donutEvolutionConfig.style.chart.backgroundColor"
+            :background="donutEvolutionConfig.style.chart.zoom.color"
+            :borderColor="donutEvolutionConfig.style.chart.backgroundColor"
             :fontSize="donutEvolutionConfig.style.chart.zoom.fontSize"
             :useResetSlot="donutEvolutionConfig.style.chart.zoom.useResetSlot"
             :labelLeft="donutEvolutionConfig.style.chart.layout.grid.xAxis.dataLabels.values[Number(slicer.start)] || ''"

src/components/vue-ui-quick-chart.vue

@@ -1281,7 +1281,8 @@ defineExpose({
         <Slicer 
             v-if="[detector.chartType.BAR, detector.chartType.LINE].includes(chartType) && quickConfig.zoomXy && formattedDataset.maxSeriesLength > 1"
             :key="`slicer_${slicerStep}`"
-            :background="quickConfig.backgroundColor"
+            :background="quickConfig.zoomColor"
+            :borderColor="quickConfig.backgroundColor"
             :fontSize="quickConfig.zoomFontSize"
             :useResetSlot="quickConfig.zoomUseResetSlot"
             :labelLeft="quickConfig.xyPeriods[slicer.start] ? quickConfig.xyPeriods[slicer.start] : ''"

src/components/vue-ui-xy.vue

@@ -832,14 +832,15 @@
         <Slicer
             v-if="chartConfig.chart.zoom.show && maxX > 6 && isDataset"
             :key="`slicer_${slicerStep}`"
-            :background="chartConfig.chart.backgroundColor"
+            :background="chartConfig.chart.zoom.color"
             :fontSize="chartConfig.chart.zoom.fontSize"
             :useResetSlot="chartConfig.chart.zoom.useResetSlot"
             :labelLeft="chartConfig.chart.grid.labels.xAxisLabels.values[slicer.start]"
             :labelRight="chartConfig.chart.grid.labels.xAxisLabels.values[slicer.end-1]"
             :textColor="chartConfig.chart.color"
             :inputColor="chartConfig.chart.zoom.color"
             :selectColor="chartConfig.chart.zoom.highlightColor"
+            :borderColor="chartConfig.chart.backgroundColor"
             :max="maxX"
             :min="0"
             :valueStart="slicer.start"