fix(Slider): incorrect bar-height when vertical (#6065)

src/slider/index.js

@@ -148,16 +148,16 @@ export default createComponent({
 
   render() {
     const { vertical } = this;
-    const style = {
-      background: this.inactiveColor,
-    };
-
     const mainAxis = vertical ? 'height' : 'width';
     const crossAxis = vertical ? 'width' : 'height';
 
+    const wrapperStyle = {
+      background: this.inactiveColor,
+      [crossAxis]: addUnit(this.barHeight),
+    };
+
     const barStyle = {
       [mainAxis]: `${((this.value - this.min) * 100) / this.range}%`,
-      [crossAxis]: addUnit(this.barHeight),
       background: this.activeColor,
     };
 
@@ -167,7 +167,7 @@ export default createComponent({
 
     return (
       <div
-        style={style}
+        style={wrapperStyle}
         class={bem({ disabled: this.disabled, vertical })}
         onClick={this.onClick}
       >

src/slider/index.less

@@ -3,6 +3,7 @@
 .van-slider {
   position: relative;
   width: 100%;
+  height: @slider-bar-height;
   background-color: @slider-inactive-background-color;
   border-radius: @border-radius-max;
   cursor: pointer;
@@ -19,7 +20,8 @@
 
   &__bar {
     position: relative;
-    height: @slider-bar-height;
+    width: 100%;
+    height: 100%;
     background-color: @slider-active-background-color;
     border-radius: inherit;
     transition: width @animation-duration-fast;
@@ -57,8 +59,17 @@
 
     .van-slider__button-wrapper {
       top: auto;
+      right: 50%;
       bottom: 0;
       transform: translate3d(50%, 50%, 0);
     }
+
+    // use pseudo element to expand click area
+    &::before {
+      top: 0;
+      right: -@padding-xs;
+      bottom: 0;
+      left: -@padding-xs;
+    }
   }
 }

src/slider/test/__snapshots__/demo.spec.js.snap

@@ -39,8 +39,8 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-slider">
-      <div class="van-slider__bar" style="width: 50%; height: 4px; background: rgb(238, 10, 36);">
+    <div class="van-slider" style="height: 4px;">
+      <div class="van-slider__bar" style="width: 50%; background: rgb(238, 10, 36);">
         <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
           <div class="van-slider__button"></div>
         </div>

src/slider/test/__snapshots__/index.spec.js.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`bar-height prop 1`] = `
-<div class="van-slider">
-  <div class="van-slider__bar" style="width: 50%; height: 10px;">
+<div class="van-slider" style="height: 10px;">
+  <div class="van-slider__bar" style="width: 50%;">
     <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
       <div class="van-slider__button"></div>
     </div>