滑块
滑块功能主要适用于表单和表格中。
表单中使用
[warning] 如果需要使用滑块功能,必须按照以下配置
- class样式中增加
fsSlider
<input type="text" class="fsSlider" name="city" range="false" input="true" tips="KB" value="" min="10" max="60" showstep="true" step="10" theme="#FF5722">
[info] 配置说明
属性 | 必输 | 默认值 | 名称 | 描述 |
---|---|---|---|---|
type | 否 | default | 滑块类型 | 可选值有:default(水平滑块)、vertical(垂直滑块) |
min | 否 | 0 | 最小值 | 滑动条最小值,正整数,默认为 0 |
max | 否 | 100 | 最大值 | 滑动条最大值 |
range | 否 | false |
是否开启滑块的范围拖拽 | 若设为 true,则滑块将出现两个可拖拽的环 |
value | 否 | 0 | 滑块初始值 | 若开启了滑块为范围拖拽(即 range: true ),则需赋值字符串,异表示开始和结尾的区间,如:value: 30,60 |
step | 否 | 1 | 拖动的步长 | |
showstep | 否 | false |
是否显示间断点 | |
tips | 否 | true |
是否显示文字提示 | |
input | 否 | false |
是否显示输入框 | |
height | 否 | 200 | 滑动条高度 | 需配合 type:"vertical" 参数使用 |
disabled | 否 | false |
是否将滑块禁用拖拽 | |
theme | 否 | #009688 |
主题颜色 |
配置可以参考https://www.layui.com/doc/modules/slider.html#options
表格中展示
[warning] 表格中展示滑块的效果
使用模板的方式展示滑块信息,配置信息请参考表单配置。
<p field="city" title="滑块" width="200" templet="#cityTpl"/>
<script type="text/html" id="cityTpl">
<input type="text" class="fsSlider" name="city" range="false" tips="KB" value="" min="10" max="60" disabled="true" showstep="true" step="10" theme="#FF5722">
</script>