先上效果图吧

效果图

代码解释

为什么会有300和3000这两个特殊值，而不是400或其他数字？

因为我把两个slider的总宽度刚好设置成了屏幕宽度的80%。在这种情况下，最大值最小值之差在300以内，slider就能得到最大值和最小值之间的任何数字。如果两个slider总宽度大于80%，最大值和最小值之差也可以大于300。反之，则会小于300。

差在300之内的确定了，是不是差在300-3000之内的也和300之内的相似。

比如说最小值是20，最大值是2700。两者除以10，就变成 2-270了，操作的slider的范围也就是2-270。此时scale就为10。然后在wxml中将slider的值乘以scale就可以了

代码示例

这就是为什么最大值和最小值之差大于300时，需要输入的数字必须是整十数，slider的value值也是整十数。

当输入最大或最小值后，点击确定按钮，执行judgeNum函数。判断输入的数字是否合法，并设置一些参数scale 和 rate。

当dValue（最大最小值之差）在300之内，rate的值为 dValue / 100。当dValue在300-1000之内时，rate的值为dValue / 1000。

代码示例

动态改变两个slider的宽度

图示

比如说最小值为20，最大值为160，两者之差为140。当slider1的value为50，slider2的value为120的时候，此时如果移动左边那个slider（slider1），它能移动的最大宽度也就是 120-20的差和140的比。同理，如果移动右边的slider，它能移动的最大宽度就是160-50的差和140的比。在slider上catchtouchstart一个changeStart方法，来改变当前操作的slider 的宽度，使其能够滑动。

代码示例

在slider滑动式存储slider的value值

代码示例

Issue：

当两个slider都滑动到了最右端，此时slider1的宽度为100%，slider2的宽度为0，第二个slider覆盖在第一个slider之上，无法在操作slider。所以需要将slider2先隐藏，就能操作slider1了。然后在slider1滑动时，改变change的值为true，显示slider2。

代码示例

写文章好累，第一次写，也不知道从哪里开始写。看来多读书才是王道。

代码写得不好看，没有封装。源码地址