[new component] add Slider component #721

packages/vant-css/src/index.css

@@ -26,6 +26,7 @@
 @import './stepper.css';
 @import './progress.css';
 @import './swipe.css';
+@import './slider.css';
 
 /* form components */
 @import './checkbox.css';

packages/vant-css/src/slider.css

@@ -0,0 +1,41 @@
+@import './common/var.css';
+
+$c-slider-background: #cacaca;
+$c-pivot-border: #fff;
+
+.van-slider {
+  &--disabled {
+    opacity: .3;
+    .van-slider__pivot {
+      cursor: not-allowed;
+    }
+  }
+
+  &__bar {
+    position: relative;
+    margin: 0 15px;
+    height: 4px;
+    border-radius: 5px;
+    background: $c-slider-background;
+  }
+
+  &__loaded-portion,
+  &__finished-portion {
+    border-radius: 5px;
+    height: 100%;
+    position: absolute;
+    left: 0;
+  }
+
+  &__pivot {
+    position: absolute;
+    top: 50%;
+    width: 16px;
+    height: 16px;
+    border: 3px solid $c-pivot-border;
+    box-shadow: 0 1px 4px;
+    border-radius: 50%;
+    background-color: $c-slider-background;
+    transform: translate3d(0, -50%, 0);
+  }
+}