assignment_late
为什么捐赠
travel_explore
API 浏览器
widgets
Vue 组件
Ajax Bar Ajax 进度条
Avatar 头像
Badge 徽标
Banner 横幅
Bar 工具栏
Breadcrumbs 面包屑
Card 卡片
Carousel 轮播
Chat Message 聊天消息
Chip 纸片
Circular Progress 环形进度条
Color Picker 颜色选择器
Dialog 对话框
Editor WYSIWYG 编辑器
Expansion Item 展开项
Floating Action Button 浮动操作按钮
Icon 图标
Img 图片
Infinite Scroll 无限滚动
Inner Loading 内部加载
Intersection 交叉观察
Knob 旋钮
Linear Progress 线性进度条
List & List Items 列表与列表项
Markup Table 标记表格
Menu 菜单
No SSR
Observers 观察者
Pagination 分页
Parallax 视差
Popup Edit 弹出编辑
Popup Proxy 弹出代理
Pull to Refresh 下拉刷新
Rating 评分
Responsive 响应式
Scroll Area 滚动区域
Separator 分隔线
Skeleton 骨架屏
Slide Item 滑动项
Slide Transition 滑动过渡
Space 间隔
Spinners 加载动画
Splitter 分割面板
Stepper 步骤条
Table 表格
Tabs 标签页
Tab Panels 标签面板
Timeline 时间线
Toolbar 工具栏
Tooltip 提示框
Tree 树形控件
Uploader 上传器
Video 视频
Virtual Scroll 虚拟滚动
alternate_email
联系站长
QSlider 是用户指定最小值和最大值之间的数值的绝佳方式,可以设置有效值之间的可选步长。滑块还有一个焦点指示器(高亮显示的滑块按钮),允许通过键盘调整滑块。
另请查看它的"兄弟"组件 QRange。
正在加载 QSlider API...
用法
WARNING
您有责任调整 QSlider 周围的空间,以便标签和标记标签不会与页面上的其他内容重叠。您可以使用 CSS margin 或 padding 来实现这一点。
标准
标准
垂直
垂直方向
带内部最小/最大值 v2.4+
有时您需要将模型值限制在轨道长度内的一个区间内。为此,请使用 inner-min 和 inner-max 属性。第一个属性需要大于或等于 min 属性,而后者需要小于或等于 max 属性。
内部最小/最大值
带步长
带步长
step 属性也可以是浮点数(或数字 0,如果您需要无限精度)。
浮点数
对齐到步长
带标签
在下面的示例中,移动滑块以查看标签。
带标签
始终显示标签
自定义标签值
下面的示例更好地突出了 QSlider 如何处理标签定位,使其始终在水平方向上保持在 QSlider 的框内。
长标签
标记点
标记点
标记点标签
标记点标签插槽
颜色
颜色
无选择
无选择
轨道图片
轨道图片
轨道和滑块大小
轨道和滑块大小
延迟
延迟
空值
空值
反向
反向
暗色模式
强制暗色模式
只读和禁用
只读
禁用
在列表中使用
在列表中使用
原生表单提交
原生表单
发现错误?在浏览器中编辑此页
1. Introduction
2. QSlider API
3. 用法
3.1. 标准
3.2. 垂直
3.3. 带内部最小/最大值
3.4. 带步长
3.5. 带标签
3.6. 标记点
3.7. 颜色
3.8. 无选择
3.9. 轨道图片
3.10. 轨道和滑块大小
3.11. 延迟
3.12. 空值
3.13. 反向
3.14. 暗色模式
3.15. 只读和禁用
3.16. 在列表中使用
3.17. 原生表单提交