diff --git a/less/progress.less b/less/progress.less
index c8cc736..6d9d39d 100644
--- a/less/progress.less
+++ b/less/progress.less
@@ -8,6 +8,9 @@
 @progress-circle-text-font-weight: @text-bold-weight;
 @progress-circle-text-font-size: @global-large-font-size;
 
+@inverse-progress-background: @inverse-global-color;
+@inverse-progress-bar-background: @global-secondary-background;
+
 .hook-progress() {
   border-radius: @progress-border-radius;
   box-shadow: @progress-box-shadow;
@@ -37,3 +40,13 @@
     }
   }
 }
+
+.hook-inverse() {
+  .uk-progress {
+    background-color: @inverse-progress-background;
+  }
+
+  .uk-progress::-webkit-progress-value, .uk-progress::-moz-progress-bar  {
+    background-color: @inverse-progress-bar-background;
+  }
+}
diff --git a/less/slider.less b/less/slider.less
index 07dda8a..5bc2dc3 100644
--- a/less/slider.less
+++ b/less/slider.less
@@ -2,6 +2,50 @@
 @slider-arrow-width: 50px;
 @slider-arrow-margin: 5px;
 
+@slider-container-progress-height: 6px;
+@slider-nav-item-margin: @global-small-margin;
+@slider-nav-item-padding: 20px 30px;
+@slider-nav-item-border-radius: @global-border-radius;
+@slider-nav-item-background-hover: @ciel-color;
+@slider-nav-item-background-active: @ciel-color;
+@slider-nav-item-action-size: @icon-button-small-size;
+@slider-nav-item-action-background: @global-background;
+
+@inverse-slider-nav-item-background-hover: fade(@global-inverse-color, 15%);
+@inverse-slider-nav-item-background-active: fade(@global-inverse-color, 15%);
+
+.mobile(@link-color: @global-link-color, @link-color-hover: @global-link-hover-color) {
+  @media (max-width: @breakpoint-medium-max) {
+    slider-container {
+
+      & slider-nav-item {
+        & > * {
+          padding: 0;
+        }
+
+        & > *:hover {
+          background: none;
+        }
+
+        & > .uk-active {
+          box-shadow: none;
+          background: none;
+
+          & > .action {
+            & > a {
+              border: @global-border-width solid @link-color;
+            }
+
+            & > a:hover {
+              border-color: @link-color-hover;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 .hook-slider-misc() {
   .uk-slider-arrow {
     height: 100%;
@@ -31,4 +75,76 @@
       margin-left: -@subnav-margin-horizontal;
     }
   }
+
+  slider-container {
+    & .uk-progress {
+      height: @slider-container-progress-height;
+      cursor: pointer;
+    }
+
+    & slider-nav-item {
+      display: block;
+
+      & > * {
+        padding: @slider-nav-item-padding;
+        border-radius: @slider-nav-item-border-radius;
+        cursor: pointer;
+
+        & > .action {
+          width: @slider-nav-item-action-size;
+          position: relative;
+
+          & > a, & > a:hover {
+            display: none;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            border-radius: 500px;
+            width: @slider-nav-item-action-size;
+            height: @slider-nav-item-action-size;
+            background: @slider-nav-item-action-background;
+          }
+        }
+      }
+
+      & > *:hover {
+        background: @slider-nav-item-background-hover;
+      }
+
+      & > .uk-active {
+        background: @slider-nav-item-background-active;
+
+        & > .action {
+          & > a, & > a:hover {
+            display: flex;
+          }
+        }
+      }
+
+      &:not(:last-child) {
+        margin-bottom: @slider-nav-item-margin;
+      }
+    }
+  }
+
+  .mobile();
+}
+
+.hook-inverse() {
+  slider-container {
+
+    & slider-nav-item {
+
+      & > *:hover {
+        background: @inverse-slider-nav-item-background-hover;
+      }
+
+      & > .uk-active {
+        box-shadow: 10px 10px 25px #0000001A;
+        background: @inverse-slider-nav-item-background-active;
+      }
+    }
+  }
+
+  .mobile(@inverse-base-link-color, @inverse-base-link-color);
 }