微信小程序滑动选择器怎么实现

Question

例如像途家微信小程序里面的价格选择器，如图，左右有连个控点，都是能进行滑动操作的怎么实现的
有没有类似的demo，或者讲一下思路也行

Answer 1

组件说明：
picker：
滚动选择器，现支持三种选择器，通过mode属性来区分，分别是普通选择器(mode = selector)，时间选择器(mode = time)，日期选择器(mode = date)，默认是普通选择器。

Answer 2

样式：
.sliderHView{
display: flex;
flex-direction: row;
margin: 0 40rpx 0 40rpx;
width: 70%;
}
.valueSty{
font-size: 30rpx;
text-align: center;
color:#00BDBF;
margin-top: 15rpx;
}
布局：

<view class='sliderHView' >
<text class='valueSty'>{{leftValue}}%</text>
<slider style='width:{{leftPer}};margin-right:0rpx;' bindchange="leftSchange" min='{{leftMin}}' max='{{leftMax}}' value='{{leftValue}}' activeColor='#00BDBF' backgroundColor='#000' block-size='18'/>
<slider style='width:100%;margin-left:0rpx;' bindchange="rightSchange" min='{{rightMin}}' max='{{rightMax}}' value='{{rightValue}}' activeColor='#000' backgroundColor='#00BDBF' block-size='18'/>
<text class='valueSty'>{{rightValue}}%</text>
</view>
jS：

data: {
leftMin:0,
leftMax:40,
rightMin:41,
rightMax:100,
leftValue:12,
rightValue:48,
leftPer:'40%'
},
leftSchange:function(e){
var that = this
that.setData({
leftValue: e.detail.value
})
},
rightSchange: function (e) {
var that = this
that.setData({
rightValue: e.detail.value
})
},