css 如何创建文本向下的type=“range”滑块？[duplicate]

o3imoua4 于 2022-12-01 发布在其他

关注(0)|答案(2)|浏览(162)

此问题在此处已有答案：

HTMl Range Slider With Labels every 5（2个答案）
Making a input range that perfectly aligns with numbers above it（2个答案）
9小时前关门了。
正如你所看到的，我正在使用type=“range”输入滑块来达到这个目的。但是我需要滑块，在那里我将有文本而不是数字。
第一个
所以我需要三个选项“无”，“打开”和“关闭”，当我滑动，自动如果将移动到文本。
像这样的东西
到目前为止，我只是得到了价值，这是滑动

slider.oninput = function() {
  output.innerHTML = this.value;
}

但我需要插入一些文本动态时，1被选中，然后我需要有打开选项，例如等...
注意：它需要具有响应性
图像：

css

来源：https://stackoverflow.com/questions/74630428/how-can-i-create-type-range-slider-with-text-down

2条答案

按热度按时间

0qx6xfy61#

你就不能用一个对象作为一种查找表吗？其中 predicate 是滑块值，值是你想要显示的字符串？我可能误解了这个问题。
这是代码，下面是实现它的代码片段。

const lookup = {
  1: 'None',
  2: 'Open',
  3: 'Closed'
}

...

output.innerHTML = lookup[this.value] ?? 'Invalid value';

第一个

赞(0）回复(0）举报 2022-12-01

von4xj4u2#

修改了答案，以解决问题的标签布局部分。显然，没有动态更新要做。
我喜欢为这样的情况创建一个map对象，这使得更新变得很容易。
其他提示：

使用let和const而不是var。它们提供现代化的安全检查和更直观的作用域。
CSS transition或appearance不需要供应商前缀。请参阅https://caniuse.com/mdn-css_properties_transition和https://caniuse.com/css-appearance。

第一个

赞(0）回复(0）举报 2022-12-01

我来回答

css 如何创建文本向下的type=“range”滑块？[duplicate]

2条答案

相关问题

热门标签

最新问答