Range进度条的那些事

JenisFine

于 2023-03-04 12:29:48 发布

阅读量167

点赞数

CC 4.0 BY-SA版权

分类专栏： BootStrap笔记文章标签： html bootstrap 前端 javascript css

本文链接：https://blog.youkuaiyun.com/Jenis57/article/details/129332954

BootStrap笔记专栏收录该内容

10 篇文章

订阅专栏

文章介绍了如何使用自定义的form-range类来实现跨浏览器的一致样式和内置定制功能的范围输入。通过设置min和max属性，可以设定输入范围的最小值和最大值，而step属性则允许调整步长，提供更精细的控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Range

Use our custom range inputs for consistent cross-browser（浏览器通用的） styling and built-in customization（定制化）

class：form-range

<label for="range1" class="form-label">Example range</label>
<input type="range" class="form-range" id="range1">

Min and Max

设置min and max 把range设置最低为min 最大为max的格数，例如设置min为0，max为5，就会将range设置成6个格子供调控

在input 设置属性min，max

<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

多此一举的内容，step

承接上文，如果你觉得一步一格太大了，也可以设置step，例如step=0.5，原本的6格现在就需要走10次

<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange2">