先上效果图，csdn不支持视频，这是手机录屏做成的gif，所以画质有点。。
直接上代码，小程序暂时不支持slider双向滑动，所以把两个slider拼起来用
<view class='sliderHCon'>
<view class='showMoney'>
<text class='MoneyValue'>￥{{min}}</text>
<text class='MoneyValue'>￥{{max}}</text>
</view>
<view class='twoSlider'>
<view class='select-construct'>
<view class='select-area'>
<view class='slider-container'>
<view class='leftSliderPrice sliderPrice' style='left:{{leftSliderPriceWidthX}};'>
<view class='sliderView'>
￥{{slider1Value*scale}}
</view>
</view>
<slider style='width:{{slider1W+"%"}}' class='slider-left' min='{{min}}' max='{{slider1Max}}' color='#FFAC30'
selected-color='#e5e5e5' bindchanging='changing' catchtouchstart='changeStart' bindchange='changed' data-idx='1'></slider>
<view class='rightSliderPrice sliderPrice' style='right:{{rightSliderPriceWidthX}};'>
<view class='sliderView'>
￥{{slider2Value*scale}}
</view>
</view>
<slider wx:if='{{!change}}' style='width:{{slider2W+"%"}}' class='slider-right' min='{{slider2Min}}' max='{{max}}' color='#e5e5e5'
selected-color='#FFAC30' bindchanging='changing'catchtouchstart='changeStart' bindchange='changed' data-idx='2'></slider>
</view>
</view>
</view>
</view>
</view>
.sliderHCon {
height: 250rpx;
width: 100%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.MoneyValue {
font-size: 22rpx;
text-align: center;
color: #666;
margin-top: 15rpx;
}
.showMoney {
display: flex;
justify-content: space-between;
width: 68%;
margin-top: -34px;
position: absolute;
color: #666;
font-size: 22rpx;
}
.showMoney text {
margin-right: -67rpx;
}
.twoSlider {
width: 93%;
height:100px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
position: relative;
}
.twoSlider .leftSliderPrice {
position: absolute;
top: -34rpx;
left: 0;
width: 100rpx;
height: 60rpx;
line-height: 40rpx;
padding: 20rpx;
text-align: center;
color: #FFF;
}
.sliderPrice view {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
font-size: 22rpx;
}
.twoSlider .rightSliderPrice {
position: absolute;
top: -34rpx;
right: 0;
width: 100rpx;
height: 60rpx;
line-height: 40rpx;
padding: 20rpx;
text-align: center;
color: #FFF;
}
.sliderView {
border: solid red 1rpx;
color: red;
}
/* 滑动样式 */
.select-construct{
width: 100%;
}
.select-area{
width: 80%;
padding: 30px 10% 15px;
display: flex;
flex-direction: column;
align-items: center;
}
.slider-container{
width: 100%;
display: flex;
padding: 20px 0 10px;
position: relative;
}
.slider-left,.slider-right{
margin-right: -8rpx;
}Page({
/**
* 页面的初始数据
*/
data: {
change: false, // 当两个slider在最右端重合时，将change设置为true，从而隐藏slider2，才能继续操作slider1
max: 10000, // 两个slider所能达到的最大值
min: 0, // 两个slider所能取的最小值
rate: 100, // slider的最大最小值之差和100（或1000）之间的比率
scale: 1, // 比例系数。页面显示值的时候，需要将slider1Value(slider2Value)乘以比例系数scale
slider1Max: 10000, // slider1的最大取值
slider1Value: 0, // slider1的值
slider2Value: 10000, // slider2的值
slider2Min: 0, // slider2的最小取值
slider1W: 100, // slider1的宽度
slider2W: 0, // slider2的宽度
leftSliderPriceWidthX: '-1.5%',
rightSliderPriceWidthX: '-21%'
},
// 开始滑动
changeStart: function (e) {
var idx = parseInt(e.currentTarget.dataset.idx)
if (idx === 1) {
// dW是当前操作的slider所能占据的最大宽度百分数
var dW = (this.data.slider2Value - this.data.min) / this.data.rate
this.setData({
slider1W: dW,
slider2W: 100 - dW,
slider1Max: this.data.slider2Value,
slider2Min: this.data.slider2Value,
change: false
})
} else if (idx === 2) {
var dw = (this.data.max - this.data.slider1Value) / this.data.rate
this.setData({
slider2W: dw,
slider1W: 100 - dw,
slider1Max: this.data.slider1Value,
slider2Min: this.data.slider1Value,
change: false
})
}
},
// 正在滑动
changing: function (e) {
var idx = parseInt(e.currentTarget.dataset.idx)
var value = e.detail.value
let rightSliderPriceWidthX = (this.data.max-value)/116-21
let leftSliderPriceWidthX = value/116
if (idx === 1) {
this.setData({
slider1Value: value,
leftSliderPriceWidthX:leftSliderPriceWidthX+'%'
})
} else if (idx === 2) {
this.setData({
slider2Value: value,
rightSliderPriceWidthX: rightSliderPriceWidthX+'%'
})
}
},
changed: function (e) {
if (this.data.slider1Value === this.data.slider2Value && this.data.slider2Value === this.data.max) {
this.setData({
change: true
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
