xy-uislider
滑动条，展示当前值和可选范围。用于替代原生input[type=range]。
使用方式
html
<!-- 引入 -->
<script type="module">
import '../components/slider/index.js';
</script>
<!-- 使用 -->
<xy-slider></xy-slider>
xy-slider属性与原生input[type=range]大致相同，如下
值value
设置或返回滑块条的默认值（默认为50）。
html
<xy-slider></xy-slider>
<xy-slider value="30"></xy-slider>
<xy-slider value="100"></xy-slider>
禁用disabled
通过disabled可以禁用滑动条。
html
<xy-slider disabled></xy-slider>
JavaScript操作get、set
js
slider.disabled; //获取
slider.disabled = false;
slider.disabled = true;
//原生属性操作
slider.setAttribute('disabled','');
slider.removeAttribute('disabled');
提示tips
可以添加tips属性，可以在滑动时显示value值。
html
<xy-slider value="30" tips></xy-slider>
还可以进行插值表达式${value}
html
<xy-slider tips="￥${value*2}"></xy-slider>
JavaScript操作set
js
slider.tips = '${value}%';
slider.tips = false;
//原生属性操作
slider.setAttribute('tips','${value}%');
slider.removeAttribute('tips');
最小值min、最大值max、步长step
设置或返回滑块条的min和max属性值。默认值分别为0和100。
设置或返回滑块条的step属性值。默认值为1。
min: max: step:
html
<xy-slider min="0" max="100" step="10" tips></xy-slider>
JavaScript操作get、set
js
slider.step; //获取
slider.step = 10;
//原生属性操作
slider.getAttribute('step');
slider.setAttribute('step',10);
垂直滑动条vertical
添加vertical属性可以垂直展示
html
<xy-slider vertical tips></xy-slider>
默认高度为150px，可以使用CSS修改
css
slider{
height:200px;
}
自定义样式::part(slider)
需要注意的是，xy-slider本身不包含任意样式，如果需要自定义滑动输入条本身样式，需要深入到shadow dom中，这里暴露了内置伪元素::part(slider)用来自定义样式
内部结构如下（可查看控制台）：
html
<xy-slider>
# shadow-root
<input type="range" part="slider">
::after
比如改为实心的滑块（仅支持Chrome）
css
xy-slider::part(slider)::after{
background: var(--primary-color)
}
事件event
该组件暴露了常见的回调事件
onchange
滑动条在滑动完成时触发。
html
<xy-slider tips onchange="fn(event)"></xy-slider>
其他触发方式
js
slider.onchange = function(ev){
//获取value的几种方式
console.log(this.value);
console.log(ev.target.value);
}
slider.addEventListener('change',function(ev){
console.log(this.value);
console.log(ev.target.value);
})
oninput
滑动条在滑动时触发。
html
<xy-slider tips oninput="fn(event)"></xy-slider>
js
slider.oninput = function(ev){
console.log(this.value);
console.log(ev.target.value);
}
slider.addEventListener('input',function(ev){
console.log(this.value);
console.log(ev.target.value);
})