bounty将在4天后过期。回答此问题可获得+100的声望奖励。Basj正在寻找规范答案。
我需要创建一个科学输入滑块。更准确地说:
- n个刻度,例如:无论范围(0 - 200、1 - 11等)如何,我都希望11个刻度覆盖整个范围
- 每个刻度下方数字值标签
- 当滑块光标靠近刻度时,没有“粘合”吸引效果
实体模型:
注:
- 这不是Ticks for type="range" HTML input的副本,因为这3点。
- 浏览器支持:至少Chrome
下面的代码生成了一个带刻度的HTML滑块,它可以工作。但是,它不符合上面的第二个和第三个条件。
input { width: 400px; }
<input type=range min=0 max=200 value=0 step=1 list=tickmarks>
<datalist id=tickmarks>
<option>0</option>
<option>20</option>
<option>40</option>
<option>60</option>
<option>80</option>
<option>100</option>
<option>120</option>
<option>140</option>
<option>160</option>
<option>180</option>
<option>200</option>
</datalist>
HTML <input type="range">
是否有一个属性来启用这些“数字标记”的刻度?
满足所有三个标准的实现是可能的吗?
4条答案
按热度按时间3zwjbxry1#
你可以通过在你的区域下面放置一个div来实现这一点,你可以将它分成几个部分。下面的代码只是一个概念验证,它已经工作了,但是当你真正将它集成到你的项目中时,你需要使它可重用和可调整。
c9qzyr3d2#
正如Lajos Arpad的回答所指出的,最好避免使用
datalist
,因为您的需求超出了它的能力。您需要手动创建具有数值的刻度。下面的代码使用与您的问题中的原始代码类似的HTML布局,并具有适合的样式。请注意,宽度是在父元素上设置的,如果父元素太小,则刻度数字将换到新的一行。要解决此问题,您可能需要减小刻度数字字体大小。
为了让刻度在所有主流浏览器中正确排列,最好设置滑块的样式,使其在不同浏览器中看起来相同。包括针对Chrome和Firefox特定伪元素的范围滑块样式。结果在所有基于Chromium和Mozilla的浏览器中看起来应该相同。
请注意,如问题中所示,填充范围滑块的真正跨浏览器方法只能使用JavaScript实现。
ttvkxqim3#
一个可能的解决方案是动态创建一个规模。有很多细节需要考虑,例如步骤。您可以从这里开始:
1qczuiv04#
您可以将
datalist
与option
列表一起使用,但它需要您添加label
文本,因为value
不会用作刻度标记值。通用设置(MDN:input type=“range”,添加刻度线)
对于标签,您有两个选项:
选项1:使用
label
与文本选项2:使用 * 选项文本 *
当同时使用
label
文本和 *option文本 * 时,后者将被忽略。对于代码片段,我使用 option 1。标记
input type="range"
和datalist
必须具有相等的width
。在代码片段中,我使用 *CSS自定义属性 *--slider-width: 100%
来设置两个元素的宽度。datalist
作为带有justify-content: space-between
的Flexbox行容器非常适合分布刻度线标签,它将外部标签推到它们各自的父级左边距和右边距,同时将其余标签均匀分布在剩余空间上。width
,等于最大的文本。在代码片段中,我取了标签200
的宽度。text-align: center
。根据使用的标签文本,可能需要对
margin/padding
、option:first-child
和/或option:last-child
进行一些修改。Bonus在代码片段中,我添加了类
.vertical
,以展示如何使用flex-direction: column
和writing-mode: vertical-lr
轻松获得90度旋转的刻度标记标签。更新
正如最初评论的那样,上述方法并不能解决Firefox浏览器中
datalist
刻度线引起的“胶水”效应。此外,Firefox在第二次单击刻度线时会打开option
选择列表,将datalist
视为select
。虽然Firefox特定的行为可能被用户所知/首选,但它可能不适合网站。然而,经过调查,上面提到的行为似乎很难,如果不是不可能的话,禁用。人们可以选择使用Javascript创建一个完全自定义的范围滑块,但这可能被证明是矫枉过正:为单个浏览器创建一个解决方案,禁用将来可能更改或不更改的行为。
尝试方法失败:
datalist,option { pointer-events: none }
<option disabled />
工作正常,但删除了刻度线<datalist type="range" autocomplete="off">
<input type="range" autocomplete="off">
<option autocomplete="off">
<option label=".."/>
不带value=".."
<option value="..">..</option>
文本而不是label
<input type="range">
嵌入到<form>
中,所有元素为autocomplete="off"
一个三个三个一个