diff --git a/ui/stylesheets/csui/_csui.scss b/ui/stylesheets/csui/_csui.scss
index 9a067e9567e..63d22eaebb8 100644
--- a/ui/stylesheets/csui/_csui.scss
+++ b/ui/stylesheets/csui/_csui.scss
@@ -74,4 +74,5 @@ html, body {
 @import "toolbar";
 @import "breadcrumbs";
 @import "action";
-@import "wizard";
\ No newline at end of file
+@import "wizard";
+@import "slider";
diff --git a/ui/stylesheets/csui/_slider.scss b/ui/stylesheets/csui/_slider.scss
new file mode 100644
index 00000000000..c3d47a46482
--- /dev/null
+++ b/ui/stylesheets/csui/_slider.scss
@@ -0,0 +1,46 @@
+// 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.
+@mixin csui-slider-area {
+    @include linear-gradient(#656565, #aeaeae);
+
+    box-shadow: inset 0px 0px 4px black;
+    width: 100%;
+    height: 25px;
+    margin: 20px;
+    border-radius: 3px;
+}
+
+@mixin csui-slider-handle {
+    @include linear-gradient(#ffffff, #c4c4c4);
+
+    border: 1px solid #2f2f2f;
+    display: block;
+    width: 30px;
+    height: 25px;
+    position: relative;
+    border-radius: 3px;
+    padding: 0;
+}
+
+// jQuery UI defaults
+.ui-slider {
+    @include csui-slider-area;
+}
+
+.ui-slider-handle {
+    @include csui-slider-handle;
+}