这是一款基于纯 CSS 异形边框、运动路径与滚动时间线技术实现的七种轨道形状的数值范围滑块。灰色轨道可以切换为波浪、锯齿、钟形、斜坡等造型，圆形滑块沿路径移动，已选部分变为玫红色，上方气泡显示数值。页面没有数值更新脚本，主要借助 CSS 时间线和自定义属性，把原生 range 的位置传给轨道与提示。

七种曲线滑块怎样保持数值联动

七种轨道共享一个输入框。下拉选择改变路径变量，数值输入不需要重新建立。
进度和气泡保持联动。滑块位置、着色范围与计数器由同一时间线驱动。
气泡朝向可以切换。复选框让气泡保持竖直，或沿路径方向呈现轻微转动。

运动路径与时间线如何驱动气泡位置

原生滑块的拇指建立视图时间线，标签和输出区域读取该时间线，将进度映射为路径偏移与整数计数。border-shape 负责轨道轮廓，shape() 描述不同曲线。这是一种偏实验性的 CSS 组件，浏览器能力比普通范围条要求更高。

offset: var(--p) var(--v);

异形滑杆的范围、尺寸和路径在哪里修改

最小值、最大值与初始值在 index.html，路径定义、轨道厚度、滑块直径与颜色在 style.css。修改范围时要同步 output 上的边界值，避免气泡数字与输入值不一致。

曲线路径滑块的浏览器与业务接入问题

普通Safari或旧浏览器为什么看不到？

效果依赖 border-shape、shape() 和滚动时间线等能力，现有样式会对不支持的环境显示提示。适合明确支持相关特性的新版 Chromium 环境。

可以改成原生直线滑块作为回退吗？

可以另外提供普通 range 样式，但当前没有完整的跨浏览器曲线回退实现。

需要JavaScript才能读到数值吗？

展示由 CSS 完成；接业务时仍可按原生 input 的 value 或 input 事件读取数值。

适合创意参数面板、交互实验和异形表单控件展示。下载后可查看曲线滑块的完整结构与参数，按自己的内容继续调整。