From 0a8659a341909ea062a84a7df902c287ad0b57c3 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Mon, 12 Apr 2021 21:46:28 +0300
Subject: [PATCH] [common] fix bug 49591

---
 apps/common/main/lib/component/Slider.js    |  8 +---
 apps/common/main/resources/less/slider.less | 46 ++++++++++++++-------
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js
index f6f110811..bbbb1bbb8 100644
--- a/apps/common/main/lib/component/Slider.js
+++ b/apps/common/main/lib/component/Slider.js
@@ -89,12 +89,8 @@ define([
 
         template    : _.template([
             '<div class="slider single-slider" style="">',
-                '<div class="track">',
-                    '<div class="track-left img-commonctrl"></div>',
-                    '<div class="track-center img-commonctrl"></div>',
-                    '<div class="track-right img-commonctrl" style=""></div>',
-                '</div>',
-                '<div class="thumb img-commonctrl" style=""></div>',
+                '<div class="track"></div>',
+                '<div class="thumb" style=""></div>',
                 '<% if (this.options.enableKeyEvents) { %>',
                 '<input type="text" style="position: absolute; top:-10px; width: 1px; height: 1px;">',
                 '<% } %>',
diff --git a/apps/common/main/resources/less/slider.less b/apps/common/main/resources/less/slider.less
index ed156501b..fc134d2bf 100644
--- a/apps/common/main/resources/less/slider.less
+++ b/apps/common/main/resources/less/slider.less
@@ -2,33 +2,51 @@
     position: relative;
     height: 18px;
 
+    &.single-slider {
+        padding-top: 7px;
+
+        .track {
+            @track-height: 4px;
+            height: @track-height;
+            border: @track-height / 2 solid @border-regular-control-ie;
+            border: @track-height / 2 solid @border-regular-control;
+            border-radius: @track-height / 2;
+            width: calc(100% + @track-height);
+            margin-left: -@track-height / 2;
+        }
+
+        .thumb {
+            @thumb-width: 12px;
+            width: @thumb-width;
+            height: @thumb-width;
+
+            border: @scaled-one-px-value-ie solid @icon-normal-ie;
+            border: @scaled-one-px-value solid @icon-normal;
+            background-color: @background-normal-ie;
+            background-color: @background-normal;
+            border-radius: @thumb-width / 2;
+
+            top: 3px;
+            margin-left: @thumb-width / -2;
+
+            &.active {
+            }
+        }
+    }
+
     .thumb {
         position: absolute;
         left: 0;
-        top: 0;
-        width: 13px;
-        height: 15px;
         margin-left: -7px;
         cursor: default;
-        background-position: @slide-thumb-offset-x @slide-thumb-offset-y;
 
         &.active {
-            background-position: @slide-thumb-offset-x @slide-thumb-offset-y - 30px;
         }
     }
 
     .track {
         height: 18px;
         background-color: transparent;
-        .track-left {
-            background-position: @slide-track-offset-x @slide-track-offset-y;
-        }
-        .track-right {
-            background-position: @slide-track-offset-x - 7px @slide-track-offset-y;
-        }
-        .track-center {
-            background-position: @slide-track-offset-x @slide-track-offset-y - 18px;
-        }
 
         div {
             width: 7px;