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([
'
',
- '
',
- '
',
+ '
',
+ '
',
'<% if (this.options.enableKeyEvents) { %>',
'
',
'<% } %>',
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;