小程序自定义滑块movable-area

css=====================================

movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  width: 1rpx;
  background: transparent;
  color: #fff;
  position: relative;
}

movable-view view {
  position: absolute;
  top: -40rpx;
  background: #799AF4;
  z-index: 10;
  /* height: 100%; */
  width: 150rpx;
  text-align: center;
}
movable-area {
  height: 30rpx;
  width: 500rpx;
  margin: 50rpx;
  background: linear-gradient(to right,#FFC025 33%, #56DBBD 33%, #56DBBD 66%,#FB8D82 66%,#FB8D82);
  /* overflow: hidden; */
}
input {
  margin: 0 auto;
  border: 1rpx solid #000;
  width: 150rpx;
  height: 50rpx;
  text-align: center;
}
.max {
  width: 600rpx;
  height: 600rpx;
}

.page-section{
  width: 100%;
  margin-bottom: 60rpx;
}

.page-section:last-child{
  margin-bottom: 0;
}

.page-section-title{
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

html========================================

  
    movable-view区域小于movable-area
    
    
      莫挨老子
    
  
  加1
  减1

js===================================

Page({
  onShareAppMessage() {
    return {
      title: 'movable-view',
      path: 'page/component/pages/movable-view/movable-view'
    }
  },
  onLoad() {
    this.initDomX();
  },
  data: {
    x: 0, // x轴
    y: 0, // y轴
    val:60, // 输入框值
    min: 60, // 最小值
    max: 150, // 最大值
    areaVal: 90, // max - min
    domX:0, // 砝码的总长
  },
  initDomX() {
    let _this = this;
    const query = wx.createSelectorQuery();
    query.select('#area').boundingClientRect();
    query.select('#areaView').boundingClientRect();
    query.exec((res) => {
      _this.setData({
        domX: res[0].width - res[1].width
      })
    })
  },
  onChange(e) {
    let _this = this;
    this.setData({
      // 取整
      // val: Math.round(_this.data.min + (_this.data.areaVal * ((Math.round(e.detail.x / _this.data.domX * 10000) / 100)/100)))
      // 保留两位小数
      val: (_this.data.min + (_this.data.areaVal * ((e.detail.x / _this.data.domX * 10000) / 100) / 100)).toFixed(1)
    })
  },
  onBlur(e) {
    let _this = this;
    let val = e.detail.value - 0;
    this.setData({
      x: (_this.data.domX * ((val - _this.data.min) / _this.data.areaVal)),
      // val: val.toFixed(2)
    })
    console.log((_this.data.domX * ((val - _this.data.min) / _this.data.areaVal)));
    // this.setData({
      // 取整
      // val: Math.round(e.detail.value),
      // x: Math.round(_this.data.domX * ((val - _this.data.min) / _this.data.areaVal))
      // 保留两位小数
      // val: val.toFixed(2),
      // x: _this.data.domX * ((val - _this.data.min) / _this.data.areaVal)
    // })
  },
  onAdd(e) {
    let _this = this;
    let val = (_this.data.val-0) + 1;
    console.log(val);
    this.setData({
      // val: val,
      x: (_this.data.domX * ((val - _this.data.min) / _this.data.areaVal)),
    })
  },
  onSub(e) {
    let _this = this;
    let val = (_this.data.val-0) - 1;
    this.setData({
      // val: val,
      x: (_this.data.domX * ((val - _this.data.min) / _this.data.areaVal)),
    })
    console.log(this.data.x);
  }
})

效果：莫挨老子是拖动的节点，样式随便写的