创艺 Slider 是一个范围滑块组件，灵感来自于安卓系统一些 APP 的设置控件。使用起来非常简单，你可以轻易地更改定制这些代码。预设的有一些主题色和尺寸大小，可以自定义范围最大值、最小值、步长、默认值，以步长为基础进行值的动态变更，且支持横向与竖向两个方向。
具有响应式尺寸的特点，采用动态计算的宽高。
独立 Javascript 脚本，没有其它库的依赖。
需要浏览器具备 DOM3 与 CSS3 或更高的支持。
2022/8/15 最后更新然后采用经典的样式表与脚本引用的方式：
<link href="cy_html_slider.css" rel="stylesheet" />
<script src="cy_html_slider.js"></script>
注意如有需要请把路径替换成对应文件的路径。
HTML 的标记结构如下：
<div id="cy_slider_1" class="DIV_cy_slider">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
然后添加脚本初始化代码：
var slider_1 = new cy_slider("#cy_slider_1", {
max_data: 100,
min_data: 0,
default_data: 50,
step: 1
})
结果：
其中 HTML 的标记结构除了 id 值外都是必须的；对于 id 属性也建议保留，因为脚本会采用 DOM 选择器进行初始化，这要求选择器具有唯一结果性。
new cy_slider("DOM 选择器", {
max_data: 100,
min_data: 0,
default_data: 50,
step: 1,
callback: function (value) {
// 此处 value 参数为变动后的结果
}
})
DOM 选择器 - DOM 选择器
max_data - 最大值【数值】
min_data - 最小值【数值】
default_data - 默认值【数值】
step - 步长【数值】
callback - 值变动后的回调方法【方法】
注：回调方法中会携带一个结果参数，此参数是变动后的值；DOM 选择器只会选择第一个匹配的结果；步长与大小值之间最多被分为 200 步，比如 0~10000 的步长结构至少是 [0,50,100,150 ... ] 。
除了默认的大小外，还有另外两个，分别是 big 和 huge，只需要在外层 div 元素的类名中添加该尺寸类名即可：
<div id="cy_slider_2" class="DIV_cy_slider">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
<div id="cy_slider_3" class="DIV_cy_slider big">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
<div id="cy_slider_4" class="DIV_cy_slider huge">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
结果：
除了默认的蓝色外，还有 6 种预设的主题色，分别是 red、orange、yellow、green、cyan、purple；和尺寸大小的用法一样，只需在类名中加入该主题色名：
<div id="cy_slider_5" class="DIV_cy_slider big">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
<div id="cy_slider_6" class="DIV_cy_slider big red">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
<div id="cy_slider_7" class="DIV_cy_slider big orange">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
<div id="cy_slider_8" class="DIV_cy_slider big yellow">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
<div id="cy_slider_9" class="DIV_cy_slider big green">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
<div id="cy_slider_10" class="DIV_cy_slider big cyan">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
<div id="cy_slider_11" class="DIV_cy_slider big purple">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
结果：
如果外层 div 元素添加了 disabled 属性且该属性值不为 “false”，那么此滑块将会被禁用，禁用的滑块会变得半透明：
<div id="cy_slider_12" class="DIV_cy_slider" disabled>
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
<div id="cy_slider_13" class="DIV_cy_slider big cyan" disabled="">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
<div id="cy_slider_14" class="DIV_cy_slider huge purple" disabled="true">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
结果：
注：设置 disabled 属性只能用于初始化，若想之后再变更禁用属性，需使用公开的方法，参见后文。
在外层 div 元素的类名中加入 vertical 即可将此滑块呈现为竖状：
<div id="cy_slider_15" class="DIV_cy_slider vertical">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
<div id="cy_slider_16" class="DIV_cy_slider vertical big red">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
<div id="cy_slider_17" class="DIV_cy_slider vertical huge green">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
<div id="cy_slider_18" class="DIV_cy_slider vertical huge yellow" disabled>
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
结果：
* 只能在初始化时决定是否为竖状。
下面是一个综合的应用例子：
<p id="slider_19_value">0</p>
<div id="cy_slider_19" class="DIV_cy_slider big">
<div class="length"></div>
<span class="handler"></span>
<div class="light"></div>
</div>
<a class="BUTTON" onclick="slider_19.setDisabled(true)">设置禁用</a>
<a class="BUTTON" onclick="slider_19.setDisabled(false)">设置启用</a>
<script>
var slider_19 = new cy_slider("#cy_slider_19", {
max_data: 100,
min_data: 0,
default_data: 100,
step: 1,
callback: function (value) {
document.getElementById("slider_19_value").innerText = value
}
})
slider_19.setDisabled(true)
slider_19.setSliderData(10)
</script>
结果：
setDisabled(bool) - 动态设置滑块是否禁用，true 为禁用，false 为启用
setSliderData(data) - 动态设置滑块的值，data 参数为数值
目前只有这么多测试成功的公开方法，请根据实际情况决定是否动态变更其它 DOM 内容，若使用非公开的方法进行变动则可能出现意料之外的效果。
如果载入时 slider 为隐藏状态（display: none），那么默认初始化操作将可能不会正确生效，这会影响 slider 初始化时的样式。