微信小程序双向滑动区间选择器
微信小程序的区间选择器，蛮适合用在价格筛选、分数区间这类场景。双滑块设计，左右滑一下，选个范围就搞定，交互挺自然的。滑动过程还能实时显示值，用户体验加分。
双向滑动的slider，用的是微信小程序自定义组件，主要由WXML、WXSS配合JavaScript事件控制。比如你可以用bindchange监听滑块拖动，再配个text显示当前选中的区间值，整体逻辑清晰，改起来也方便。
两个滑块控制起止值，初始值、最大/最小值、步进值都能配置，还能自定义样式，UI 风格好适配。写交互的时候注意边界，比如不能让左滑块超过右边那个，不然数据就乱了。
体验方面，也做得挺细的。比如滑动时候的跟手程度、选中值的实时反馈这些细节，好了感觉整个组件就顺手。不少商城和打分类小程序都用类似的方案。
想进一步玩花的？你可以参考下价格区间热度柱状图，把slider和图表联动起来，视觉效果直接上一个台阶。
如果你在做商品筛选、范围过滤这类需求，可以直接把这套组件拉下来看看，拿来即用，也方便扩展。
文件大小：76.44KB
评论区