crowd-slider
一个带有滑动旋钮的栏,让工作人员可以通过移动旋钮从值范围中选择一个值。对于反映强度级别的设置(如音量、亮度或颜色饱和度),使用滑块是一个不错的选择。
请参阅在 CodePen
以下是使用 <crowd-slider>
元素的调查模板的示例。复制以下代码,并保存到具有 .html
扩展名的文件中。在任何浏览器中打开该文件,进行预览并与该模板进行交互。
属性
此元素支持以下属性。
disabled
一个布尔值开关,如果存在,将滑块显示为已禁用。
editable
一个布尔值开关,如果存在,将显示一个向上/向下按钮,可以选择此按钮来选择值。
通过向上/向下按钮选择值是通过移动滑块上的旋钮来选择值的替代方法。滑块上的旋钮将与向上/向下按钮选择同步移动。
max
一个数值,它指定滑块上的最大值。
min
一个数值,它指定滑块上的最小值。
name
一个字符串,用于标识工作人员提交的答案。此值将与 JSON 对象中指定答案的密钥匹配。
pin
一个布尔值开关,如果存在,将随旋钮移动而显示旋钮上方的当前值。
必需
一个布尔值开关,如果存在,要求工作人员提供输入。
secondary-progress
当与 crowd-slider-secondary-color
CSS 属性一起使用时,进度条的颜色将随由 secondary-progress
表示的点相应改变。例如,如果用于表示流视频上的进度,value
将表示查看器位于视频时间线中的位置。secondary-progress
值将表示时间线上视频已缓冲到的点。
step
一个数值,它指定滑块上可选值之间的差值。
value
一个预设值,如果工作人员未提供输入,则成为默认值。
元素层次结构
此元素具有以下父元素和子元素。
-
父元素:crowd-form
-
子元素:无
另请参阅
有关更多信息,请参阅下列内容。