Simplified fill slider with offset (#116)

* RSP-629 - Fill Slider - with Offset

* RSP-629 - Adding example of fill slider with offset

* Adding back removed code while migration

* Simplified fill offset slider

Author: devongovett

docs/slider/slider-filled-offset.yml

@@ -0,0 +1,46 @@
+---
+name: Slider - Filled-Offset
+description: With fill and offset.
+markup: |
+  <div class="spectrum-Slider">
+    <div class="spectrum-Slider-labelContainer">
+      <label class="spectrum-Slider-label" id="spectrum-Slider-label-18" for="spectrum-Slider-input-18">Slider Label</label>
+      <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-18">14</div>
+    </div>
+    <div class="spectrum-Slider-controls">
+      <div class="spectrum-Slider-track" style="width: 25%;"></div>
+      <div class="spectrum-Slider-handle" style="left: 20%;">
+        <input type="range" class="spectrum-Slider-input" value="14" min="10" max="20" id="spectrum-Slider-input-18">
+      </div>
+      <div class="spectrum-Slider-track" style="width: 50%;"></div>
+      <div class="spectrum-Slider-fill" style="left: 20%; width: 30%"></div>
+    </div>
+  </div>
+  <div class="spectrum-Slider">
+    <div class="spectrum-Slider-labelContainer">
+      <label class="spectrum-Slider-label" id="spectrum-Slider-label-19" for="spectrum-Slider-input-19">Slider Label</label>
+      <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-19">14</div>
+    </div>
+    <div class="spectrum-Slider-controls">
+      <div class="spectrum-Slider-track" style="width: 25%;"></div>
+      <div class="spectrum-Slider-handle" style="left: 70%;">
+        <input type="range" class="spectrum-Slider-input" value="14" min="10" max="20" id="spectrum-Slider-input-19">
+      </div>
+      <div class="spectrum-Slider-track" style="width: 50%;"></div>
+      <div class="spectrum-Slider-fill spectrum-Slider-fill--right" style="left: 50%; width: 20%"></div>
+    </div>
+  </div>
+  <div class="spectrum-Slider is-disabled">
+    <div class="spectrum-Slider-labelContainer">
+      <label class="spectrum-Slider-label" id="spectrum-Slider-label-19" for="spectrum-Slider-input-19">Slider Label</label>
+      <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-19">14</div>
+    </div>
+    <div class="spectrum-Slider-controls">
+      <div class="spectrum-Slider-track" style="width: 25%;"></div>
+      <div class="spectrum-Slider-handle" style="left: 70%;">
+        <input type="range" class="spectrum-Slider-input" value="14" min="10" max="20" id="spectrum-Slider-input-19">
+      </div>
+      <div class="spectrum-Slider-track" style="width: 50%;"></div>
+      <div class="spectrum-Slider-fill spectrum-Slider-fill--right" style="left: 50%; width: 20%"></div>
+    </div>
+  </div>

src/slider/index.css

@@ -64,7 +64,8 @@
 
 .spectrum-Slider-track,
 .spectrum-Slider-buffer,
-.spectrum-Slider-ramp {
+.spectrum-Slider-ramp,
+.spectrum-Slider-fill {
   height: var(--spectrum-slider-track-height);
   box-sizing: border-box;
 
@@ -80,7 +81,8 @@
 }
 
 .spectrum-Slider-track,
-.spectrum-Slider-buffer {
+.spectrum-Slider-buffer,
+.spectrum-Slider-fill {
   padding: 0 var(--spectrum-slider-track-handleoffset) 0 0;
   margin-left: var(--spectrum-slider-track-margin-offset);
 
@@ -93,6 +95,15 @@
   }
 }
 
+.spectrum-Slider-fill {
+  margin-left: 0;
+  padding: 0 0 0 calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset));
+}
+
+.spectrum-Slider-fill--right {
+  padding: 0 calc(var(--spectrum-slider-controls-margin) + var(--spectrum-slider-track-handleoffset)) 0 0;
+}
+
 .spectrum-Slider-buffer {
   padding: 0 var(--spectrum-slider-track-handleoffset) 0 0;
 }

src/slider/skin.css

@@ -8,6 +8,9 @@
 {{ slider/slider-filled.yml }}
 */
 /* topdoc
+{{ slider/slider-filled-offset.yml }}
+*/
+/* topdoc
 {{ slider/slider-player.yml }}
 */
 /* topdoc
@@ -38,6 +41,12 @@
   }
 }
 
+.spectrum-Slider-fill {
+  &::before {
+    background: var(--spectrum-slider-fill-track-color);
+  }
+}
+
 .spectrum-Slider-buffer {
   &::before,
   &::after {
@@ -261,6 +270,11 @@
         }
       }
     }
+    .spectrum-Slider-fill {
+      &::before {
+        background: var(--spectrum-slider-fill-track-color-disabled);
+      }
+    }
     .spectrum-Slider-buffer {
       &::before {
         background: var(--spectrum-slider-player-track-buffer-color-disabled);

topdoc/resources/js/docs.js

@@ -359,6 +359,7 @@ function makeSlider(slider) {
   var handles = slider.querySelectorAll('.spectrum-Slider-handle');
   var handle = handles[0];
   var isColor = slider.classList.contains('spectrum-Slider--color');
+  var fill = slider.querySelector('.spectrum-Slider-fill');
 
   if (handles.length > 1) {
     makeDoubleSlider(slider);
@@ -407,6 +408,17 @@ function makeSlider(slider) {
         rightBuffer.style.right = (100 - bufferedAmount) + '%';
       }
     }
+
+    if (fill) {
+      fill.style.left = (percent < 50 ? percent : 50) + '%';
+      fill.style.width = (percent < 50 ? 50 - percent : percent - 50) + '%';
+      if (percent > 50) {
+        fill.classList.add('spectrum-Slider-fill--right');
+      }
+      else {
+        fill.classList.remove('spectrum-Slider-fill--right');
+      }
+    }
   }
 
   // Set initial track position