diff --git a/components/slider/index.css b/components/slider/index.css
index d7b741de91a..46fc563ae57 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -418,12 +418,12 @@ governing permissions and limitations under the License.
 /* backwards compatibility: these are not required, but they make the handle go to the edegs and align right */
 .spectrum-Slider-handleContainer,
 .spectrum-Slider-trackContainer {
-  width: calc(100% + var(--spectrum-slider-handle-width));
+  width: calc(100% + var(--spectrum-slider-handle-width-adjusted));
 
   position: absolute;
   top: calc(var(--spectrum-slider-track-height) / 2 - 1px);
 
-  margin-left: calc(var(--spectrum-slider-handle-width) / 2 * -1);
+  margin-left: calc(var(--spectrum-slider-handle-width-adjusted) / 2 * -1);
 }
 
 .spectrum-Slider-trackContainer {
diff --git a/components/slider/metadata/slider.yml b/components/slider/metadata/slider.yml
index a70b615cea1..c3a897edfab 100644
--- a/components/slider/metadata/slider.yml
+++ b/components/slider/metadata/slider.yml
@@ -188,19 +188,22 @@ examples:
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-14">14</div>
         </div>
         <div class="spectrum-Slider-controls">
-          <div class="spectrum-Slider-track"></div>
           <div class="spectrum-Slider-ticks">
             <div class="spectrum-Slider-tick"></div>
             <div class="spectrum-Slider-tick"></div>
             <div class="spectrum-Slider-tick"></div>
             <div class="spectrum-Slider-tick"></div>
             <div class="spectrum-Slider-tick"></div>
-            <div class="spectrum-Slider-tick"></div>
           </div>
-          <div class="spectrum-Slider-handle" style="left: 40%;">
-            <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-14">
+          <div class="spectrum-Slider-trackContainer">
+            <div class="spectrum-Slider-track"></div>
+            <div class="spectrum-Slider-track"></div>
+          </div>
+          <div class="spectrum-Slider-handleContainer">
+            <div class="spectrum-Slider-handle" style="left: 75%;">
+              <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-14">
+            </div>
           </div>
-          <div class="spectrum-Slider-track"></div>
         </div>
       </div>
       <div class="spectrum-Slider spectrum-Slider--tick is-disabled">
@@ -209,19 +212,22 @@ examples:
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-15">14</div>
         </div>
         <div class="spectrum-Slider-controls">
-          <div class="spectrum-Slider-track"></div>
           <div class="spectrum-Slider-ticks">
             <div class="spectrum-Slider-tick"></div>
             <div class="spectrum-Slider-tick"></div>
             <div class="spectrum-Slider-tick"></div>
             <div class="spectrum-Slider-tick"></div>
             <div class="spectrum-Slider-tick"></div>
-            <div class="spectrum-Slider-tick"></div>
           </div>
-          <div class="spectrum-Slider-handle" style="left: 40%;">
-            <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-15">
+          <div class="spectrum-Slider-trackContainer">
+            <div class="spectrum-Slider-track"></div>
+            <div class="spectrum-Slider-track"></div>
+          </div>
+          <div class="spectrum-Slider-handleContainer">
+            <div class="spectrum-Slider-handle" style="left: 75%;">
+              <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-14">
+            </div>
           </div>
-          <div class="spectrum-Slider-track"></div>
         </div>
       </div>
   - id: slider-tick
@@ -234,7 +240,6 @@ examples:
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-12">14</div>
         </div>
         <div class="spectrum-Slider-controls">
-          <div class="spectrum-Slider-track"></div>
           <div class="spectrum-Slider-ticks">
             <div class="spectrum-Slider-tick">
               <div class="spectrum-Slider-tickLabel">0</div>
@@ -255,10 +260,15 @@ examples:
               <div class="spectrum-Slider-tickLabel">100</div>
             </div>
           </div>
-          <div class="spectrum-Slider-handle" style="left: 40%;">
-            <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-12">
+          <div class="spectrum-Slider-trackContainer">
+            <div class="spectrum-Slider-track"></div>
+            <div class="spectrum-Slider-track"></div>
+          </div>
+          <div class="spectrum-Slider-handleContainer">
+            <div class="spectrum-Slider-handle" style="left: 40%;">
+              <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-12">
+            </div>
           </div>
-          <div class="spectrum-Slider-track"></div>
         </div>
       </div>
       <div class="spectrum-Slider is-disabled">
@@ -267,7 +277,6 @@ examples:
           <div class="spectrum-Slider-value" role="textbox" aria-readonly="true" aria-labelledby="spectrum-Slider-label-13">14</div>
         </div>
         <div class="spectrum-Slider-controls">
-          <div class="spectrum-Slider-track"></div>
           <div class="spectrum-Slider-ticks">
             <div class="spectrum-Slider-tick">
               <div class="spectrum-Slider-tickLabel">0</div>
@@ -288,10 +297,15 @@ examples:
               <div class="spectrum-Slider-tickLabel">100</div>
             </div>
           </div>
-          <div class="spectrum-Slider-handle" style="left: 40%;">
-            <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" disabled id="spectrum-Slider-input-13">
+          <div class="spectrum-Slider-trackContainer">
+            <div class="spectrum-Slider-track"></div>
+            <div class="spectrum-Slider-track"></div>
+          </div>
+          <div class="spectrum-Slider-handleContainer">
+            <div class="spectrum-Slider-handle" style="left: 40%;">
+              <input type="range" class="spectrum-Slider-input" value="14" step="2" min="10" max="20" id="spectrum-Slider-input-12">
+            </div>
           </div>
-          <div class="spectrum-Slider-track"></div>
         </div>
       </div>
   - id: slider-player
diff --git a/site/resources/js/enhancement.js b/site/resources/js/enhancement.js
index 30b77e73a67..53c331753ab 100644
--- a/site/resources/js/enhancement.js
+++ b/site/resources/js/enhancement.js
@@ -478,7 +478,7 @@ function makeDoubleSlider(slider) {
     var sliderOffsetLeft = slider.offsetLeft + slider.offsetParent.offsetLeft;
 
     var x = Math.max(Math.min(e.x - sliderOffsetLeft, sliderOffsetWidth), 0);
-    var percent = (x / sliderOffsetWidth) * 100;
+    var percent = Math.round((x / sliderOffsetWidth) * 100);
 
     if (isRTL()) {
       percent = 100 - percent;
@@ -545,6 +545,7 @@ function makeSlider(slider) {
   var handle = handles[0];
   var isColor = slider.classList.contains('spectrum-Slider--color');
   var fill = slider.querySelector('.spectrum-Slider-fill');
+  var value = slider.querySelector('.spectrum-Slider-value');
 
   if (handles.length > 1) {
     makeDoubleSlider(slider);
@@ -575,12 +576,16 @@ function makeSlider(slider) {
     var sliderOffsetLeft = slider.offsetLeft + slider.offsetParent.offsetLeft;
 
     var x = Math.max(Math.min(e.x - sliderOffsetLeft, sliderOffsetWidth), 0);
-    var percent = (x / sliderOffsetWidth) * 100;
+    var percent = Math.round((x / sliderOffsetWidth) * 100);
 
     if (isRTL()) {
       percent = 100 - percent;
     }
 
+    if (value) {
+      value.innerText = percent;
+    }
+
     if (leftTrack && rightTrack && !isColor) {
       leftTrack.style.width = percent + '%';
       rightTrack.style.width = (100 - percent) + '%';