有个需求UI设计的滑动选择器中的滑块如下所示：

项目中集成的是vView2.0组件库，u-slider组件中有 blockStyle 属性，看着是用来设置自定义滑块的。但是试了下，没有效果，不知怎么回事。看了一下uView1.0组件库 u-slider组件有自定义插槽属性，所以就想着把uView1.0 中的u-slider组件给单拎出来在项目中集成。步骤如下：

uView 2.0

 uView 1.0 

 1. 拷贝u-slider组件到项目中

     直接从uView 1.0 gitee中把u-slider.vue文件中的内容拷贝出来(https://gitee.com/umicro/uView/tree/master/uview-ui/components/u-slider)

放到自己项目中的@/components/my-slider/my-slider.vue中

注意：给组件新起一个名字my-slider  不要用原来的文件名u-slider ， 也不要起名为slider。

2. 按需改造my-slider.vue

    现在slider 已经是自己项目中的一个组件了，为了方面可以对slider简单改造一下，例如给activeColor，inactiveColor 属性设置个默认颜色，这样使用的时候就不用传值了。

因为这里用自定义插槽，所以把代码也改造一下：

 不用设置选自定义插槽属性了，直接写插槽就行了。

3. 使用my-slider组件

    使用这个组件也非常简单：

             {{ temperatureValue }}export default {components: { mySlider },data() {return {lightnessValue: 20,temperatureValue: 18,};},
};.badge-button {width: 104rpx;line-height: 72rpx;background: #ffffff;box-shadow: 4rpx 10rpx 34rpx 0px rgba(29, 22, 72, 0.2);border-radius: 36rpx;text-align: center;}

4. 滑动选择器两边设置图标

    UI 设计的滑动选择器两边分别放了图标，这个实现起来非常简单，父元素设置display:flex; 

    justify-content: space-between 就可以了。 但是设置后滑动选择器就不正常了。原因是滑动选择器width为auto。嗯 用个标签把滑动选择器包裹一下，然后设置flex: 1，让其把滑动选择器的宽度撑开。

关于flex：1 有篇文章写的非常好：

Digging Into the Flex Property - Ahmad Shadeed

有兴趣的可以看看。