slider: simplify styles

Author: Chance Strickland

packages/slider/examples/basic.example.js

@@ -7,14 +7,20 @@ let name = "Basic";
 
 function Example() {
   return (
-    <Slider id="gee-whiz">
-      <SliderMarker value={10}>
-        <span>10</span>
-      </SliderMarker>
-      <SliderMarker value={90}>
-        <span>90</span>
-      </SliderMarker>
-    </Slider>
+    <div>
+      <Slider id="gee-whiz">
+        <SliderMarker value={10}>
+          <span>10</span>
+        </SliderMarker>
+        <SliderMarker value={90}>
+          <span>90</span>
+        </SliderMarker>
+      </Slider>
+      <br />
+      <br />
+      <br />
+      <Slider defaultValue={30} disabled></Slider>
+    </div>
   );
 }
 

packages/slider/examples/controlled-audio-progress.example.js

@@ -40,6 +40,9 @@ function Example() {
         max={max}
         getAriaValueText={(val) => msToTime(val)}
       ></Slider>
+      <br />
+      <br />
+      <br />
       {audio}
     </div>
   );

packages/slider/examples/controlled.example.js

@@ -50,6 +50,8 @@ function Example() {
     <div>
       <button onClick={() => setValue(MIN)}>Bring it Down!</button>
       <button onClick={() => setValue(MAX)}>Max Out!</button>
+      <br />
+      <br />
       <Slider onChange={setValue} value={value} min={MIN} max={MAX}>
         {markers.map(({ face, label, value: val }) => (
           <SliderMarker value={val} key={val}>
@@ -59,6 +61,8 @@ function Example() {
           </SliderMarker>
         ))}
       </Slider>
+      <br />
+      <br />
       <p role="status" style={{ color: "crimson" }}>
         Happieness level at {value}% – {status}
       </p>

packages/slider/examples/controlled.example.tsx

@@ -50,6 +50,8 @@ function Example() {
     <div>
       <button onClick={() => setValue(MIN)}>Bring it Down!</button>
       <button onClick={() => setValue(MAX)}>Max Out!</button>
+      <br />
+      <br />
       <Slider onChange={setValue} value={value} min={MIN} max={MAX}>
         {markers.map(({ face, label, value: val }) => (
           <SliderMarker value={val} key={val}>
@@ -59,6 +61,8 @@ function Example() {
           </SliderMarker>
         ))}
       </Slider>
+      <br />
+      <br />
       <p role="status" style={{ color: "crimson" }}>
         Happieness level at {value}% – {status}
       </p>

packages/slider/examples/with-tooltip.example.js

@@ -9,6 +9,7 @@ import {
 } from "@reach/slider";
 import "@reach/tooltip/styles.css";
 import "@reach/slider/styles.css";
+import "./examples.css";
 
 let name = "With Tooltip";
 

packages/slider/src/index.tsx

@@ -440,17 +440,7 @@ const SliderInput = forwardRefWithAs<
     ? getAriaValueText(value)
     : ariaValueTextProp;
 
-  let rangeStyle = isVertical
-    ? {
-        width: `100%`,
-        height: `${trackPercent}%`,
-        bottom: 0,
-      }
-    : {
-        width: `${trackPercent}%`,
-        height: `100%`,
-        left: 0,
-      };
+  let rangeStyle = { [isVertical ? "height" : "width"]: `${trackPercent}%` };
 
   let ctx: ISliderContext = {
     ariaLabel: getAriaLabel ? getAriaLabel(value) : ariaLabel,

packages/slider/styles.css

@@ -2,30 +2,31 @@
   --reach-slider: 1;
 }
 
-[data-reach-slider-input][data-orientation="horizontal"] {
-  width: 350px;
+[data-reach-slider-input] {
   max-width: 100%;
-  height: 4px;
-  padding-top: 30px;
-  padding-bottom: 30px;
+}
+
+[data-reach-slider-input][data-orientation="horizontal"] {
+  height: 0.5rem;
 }
 
 [data-reach-slider-input][data-orientation="vertical"] {
-  width: 4px;
+  width: 0.5rem;
+  /* the height is somewhat arbitrary but necessary for vertical sliders for
+  basic functionality */
   height: 250px;
   max-height: 100%;
-  max-width: calc(100% - 60%);
-  padding-left: 30px;
-  padding-right: 30px;
 }
 
 [data-reach-slider-input][data-disabled] {
   opacity: 0.5;
+  pointer-events: none;
 }
 
 [data-reach-slider-track] {
-  border-radius: 2px;
-  background: #f2f2f2;
+  position: relative;
+  border-radius: 0.25rem;
+  background: hsl(0, 0%, 95%);
 }
 
 [data-reach-slider-track][data-orientation="horizontal"] {
@@ -38,11 +39,31 @@
   height: 100%;
 }
 
+/* This pseudo element provides an invisible area that increases the touch
+target size of the track */
+[data-reach-slider-track]::before {
+  content: "";
+  position: absolute;
+}
+
+[data-reach-slider-track][data-orientation="horizontal"]::before {
+  width: 100%;
+  height: 1.5rem;
+  top: calc(-0.5rem - 1px);
+  left: 0;
+}
+
+[data-reach-slider-track][data-orientation="vertical"]::before {
+  width: 1.5rem;
+  height: 100%;
+  top: 0;
+  left: calc(-0.5rem - 1px);
+}
+
 [data-reach-slider-handle] {
-  width: 12px;
-  height: 12px;
-  border: 2px solid #1159a6;
-  background: #fff;
+  width: 16px;
+  height: 16px;
+  background: #1159a6;
   border-radius: 10px;
   z-index: 1;
   transform-origin: center;
@@ -62,13 +83,11 @@
   transform: translateX(-50%);
 }
 
-[data-reach-slider-handle][aria-orientation="vertical"]:focus {
-  transform: translateX(-50%);
-}
-
 [data-reach-slider-range] {
   border-radius: inherit;
   background: #1159a6;
+  left: 0;
+  bottom: 0;
 }
 
 [data-reach-slider-range][data-orientation="horizontal"] {
@@ -80,33 +99,35 @@
 }
 
 [data-reach-slider-marker] {
-  width: 8px;
-  height: 8px;
-  background: inherit;
-  border: 1px solid #fff;
-  border-radius: 4px;
+  background: hsl(0, 0%, 50%);
   transform-origin: center;
 }
 
 [data-reach-slider-marker][data-orientation="horizontal"] {
   top: 50%;
   transform: translate(-50%, -50%);
+  width: 3px;
+  height: 0.75rem;
 }
 
 [data-reach-slider-marker][data-orientation="vertical"] {
   left: 50%;
   transform: translate(-50%, -50%);
+  width: 0.75rem;
+  height: 3px;
 }
 
 [data-reach-slider-marker][data-state="at-value"],
 [data-reach-slider-marker][data-state="under-value"] {
-  background: #1159a6;
+  /* */
 }
 
 /* TODO: Remove in 1.0 */
 [data-reach-slider-track-highlight] {
   border-radius: inherit;
   background: #1159a6;
+  left: 0;
+  bottom: 0;
 }
 
 [data-reach-slider-track-highlight][data-orientation="horizontal"] {