现在很多现成的前端组件非常受欢迎，以至于越来越多的HTML原生标签渐渐被忽视。但现成组件功能局限性较大，有些情况下无法支撑实际的需求，这时候还是得靠HTML原生标签实现。
最近参与玄览组件开发时就遇到了这种情况：有多个滑动条，它们分别对应一个或多个图层，移动滑动条时要能实时修改对应图层的透明度，并且要修改滑动条样式。
常见的一些现成滑块组件样式修改容易，但提供的属性值和绑定的方法只适用单个滑块使用场景。在多滑块相互影响、联动的场景面前显得捉襟见肘，并且有时候该滑块对应功能限制了滑块使用方式。
比如超图监听控件值的变化就要input标签上绑定data-bind属性，这个是Knockout的声明式绑定，如下图所示，在input标签中加上data-bind属性，其值有两个：value和valueUpdate。这里的value值是设置的元素属性值，它会覆盖之前的属性值，如果它是一个可观察值，当它发生变化时也会更新元素的值；valueUpdate表示应该使用浏览器的其它事件来检测除change事件之外的更改，这里用input指的是当一个<input>或<textarea>元素值发生改变时会更新视图模型(ViewModel)。再用Cesium内置的knockout方法监听对应值的变化。
解决完取值问题，新的问题接踵而至，就是要修改input滑块标签样式。如果页面在chrome浏览器中展示，要先将input[type=”range”]元素的-webkit-appearance属性值设为none,如下图红框所示，然后再通过：：-webkit-slider-runnable-track修改轨道样式，并通过：：-webkit-slider-thumb修改滑块样式。
CSS能做的就到这里，最后还需要调用jQuery方法动态改变滑动条背景色。1、jQuery监听input属性改变方式：$(input的id、class).bind(“input porperty”,()=>{})；2、jQuery监听input事件方式：$(input的id、class).on(“input change”,(val)=>{})。
个人建议一个input绑定一个唯一id或name，用jQuery能快速获取想要操作的那个input元素。