uView 的 u-slider 通过 :range="true" 支持区间选择，此时 v-model 必须绑定长度为 2 的数组 [minValue, maxValue]，并需显式设置 min 和 max 属性以确保边界校验与拖动互斥逻辑正常工作。
uView 的 u-slider 如何支持区间选择
uni-app 官方 slider 组件不原生支持双滑块区间选择（即 min/max 两个可拖动端点），但 uView 的 u-slider 提供了 range 模式，本质是封装了双滑块逻辑的增强版。启用方式很简单：:range="true"，此时 v-model 必须绑定一个长度为 2 的数组，如 [minValue, maxValue]。
注意：uView 的区间模式不是简单叠加两个 slider，而是统一管理拖动冲突（比如左滑块不能越过右滑块）、自动校验边界、并复用同一根轨道。如果你强行用两个独立 u-slider 并手动控制互斥逻辑，会踩坑——例如 touch 事件竞争、@changing 频繁触发导致 UI 卡顿、iOS 上 touchend 延迟丢失最后一次值。
常见错误现象：value 绑定的是数字而非数组，控制台报错 "Invalid prop: type check failed for prop 'value'. Expected Array, got Number"；或拖动时一端卡死不动，实际是未设置 min/max 导致区间计算越界。
-
min和max必须显式设置，且value[0] >= min、value[1] ，否则初始化失败 -
step影响拖动粒度，若设为0.5，则区间端点只能落在 0.5 的整数倍上 - 微信小程序中，
range模式下block-color对左右滑块都生效，无法单独指定颜色
block-style 能否分别定制左右滑块
不能直接分别定制。uView 的 block-style 是统一作用于两个滑块的，传入对象或字符串都会被应用到左右两个 view 元素上。但你可以用 CSS 类名 + scoped 样式曲线救国：
先给 slider 加个唯一 class：<u-slider class="price-range-slider" ...>，然后在 <style scoped> 中写：
.price-range-slider .u-slider__block:nth-child(1) {
width: 40rpx;
height: 40rpx;
background: linear-gradient(135deg, #ff6b6b, #ff8e53);
box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
}
.price-range-slider .u-slider__block:nth-child(2) {
width: 40rpx;
height: 40rpx;
background: linear-gradient(135deg, #4ecdc4, #44a08d);
box-shadow: 0 2rpx 8rpx rgba(78, 205, 196, 0.3);
}
原理是 uView 渲染区间 slider 时，两个滑块节点是同级兄弟元素，顺序固定（左滑块在前）。这个技巧在 H5 和微信小程序中稳定有效，但在 NVUE 平台因渲染机制不同可能失效，需加 platform 判断。
容易踩的坑：用 !important 强覆盖 uView 内联样式，会导致 H5 端正常、小程序端失效（因为小程序里内联样式优先级更高）；或者用 deep 穿透但没加 scoped，污染全局样式。
为什么 iOS 上拖动不跟手，Android 却正常
根本原因不是组件问题，而是 touch 事件在 iOS WebView 中的延迟和坐标计算偏差。iOS Safari 对 touchmove 的节流更激进，且 clientX 在某些机型（尤其是 iPhone SE 第二代及更早）上返回非整数值，导致滑块位置抖动或跳变。
实操建议：
- 避免在
@changing回调里做耗时操作（如请求接口、复杂计算），只更新data中的临时变量 - 对
value做防抖：用setTimeout延迟 100ms 再触发业务逻辑，比lodash.debounce更轻量 - 关键兼容写法：用
e.touches[0].pageX替代clientX，它在 iOS 下更稳定；同时加上preventDefault()防止页面滚动干扰 - H5 端可额外监听
mousemove事件作为 fallback，弥补 touch 事件缺失
示例片段：
handleChanging(e) {
// 防抖逻辑
if (this.changeTimer) clearTimeout(this.changeTimer)
this.changeTimer = setTimeout(() => {
this.currentRange = e.detail.value
}, 100)
}
自定义刻度与数值提示怎么不炸裂
uView 的区间 slider 默认不显示刻度线和数值标签，但你可以用 slot + position: absolute 手动叠加。难点在于：刻度必须随滑块宽度动态缩放，且 iOS 小程序中 transform: translateX() 有渲染毛刺。
推荐做法：用 flex 布局生成等距刻度容器，每个刻度项用 flex: 1 均分宽度，再通过 v-for 渲染数字文本。这样无需计算像素偏移，规避了平台差异。
性能影响：刻度数量超过 50 个时，H5 端 DOM 节点过多会卡顿，建议用 v-show 控制仅在 active 状态下显示刻度；小程序端则无此问题，但需注意 font-size 不要小于 24rpx，否则 iOS 微信模糊不可读。
容易忽略的点：format 属性在小程序中是必填项（即使只是 val => val），否则直接白屏；而 H5 端可省略。这个约束在 uView 文档里藏得深，但报错信息明确指向 tipVisible 相关逻辑。
