src/index.html

@@ -1770,6 +1770,15 @@
           </div>
         </div>
       </div>
+      <hr>
+      <div class="row">
+        <div class="col-md-6">
+          <label>Slider</label>
+          <div>
+            <input class="slider-custom" id="slider-custom" min="1" max="100" type="range" value="50">
+          </div>
+        </div>
+      </div>
 
       <hr class="my-5">
 

src/styles/_forms.sass

@@ -291,3 +291,39 @@ select
       left: .6rem
       top: .6rem
       width: var(--spacer-2)
+
+.slider-custom
+  background: var(--color-text-tertiary)
+  border: var(--border-width) solid var(--border-color)
+  border-radius: 1.2rem
+  height: var(--spacer-4)
+  min-height: 0
+  outline: none
+  +padding(1, x)
+  transition: opacity var(--transition-speed-slow)
+  -webkit-appearance: none
+  -webkit-transition: var(--transition-speed-slow)
+  width: 100%
+
+  &:active,
+  &:focus
+    background-color: var(--color-text-tertiary)
+
+  &:hover
+    background-color: var(--color-text-secondary)
+
+  &::-moz-range-thumb
+    background: white
+    border-radius: 50%
+    cursor: pointer
+    height: var(--spacer)
+    width: var(--spacer)
+
+  &::-webkit-slider-thumb
+    appearance: none
+    background: white
+    border-radius: 50%
+    cursor: pointer
+    height: var(--spacer)
+    -webkit-appearance: none
+    width: var(--spacer)