如何将一个值添加到输入滑块（范围滑块）的中心？

huangapple
go评论99阅读模式
英文:

How can I add a value to center of a Input Slider (Range Slider)

问题

  1. 如何将这个数值文本添加到输入滑块的中心位置

<div class="range-wrap"><div class="bubble"></div><br>
<input type="range" min="30" max="400" value="50" class="range" style="text-align:right;">

英文:

>> My Input Slider <<

>> I want to do this <<

How can i add this value text to the center of the inupt slider

  1. &lt;div class=&quot;range-wrap&quot;&gt;&lt;div class=&quot;bubble&quot;&gt;&lt;/div&gt;&lt;br&gt;
  2. &lt;input type=&quot;range&quot; min=&quot;30&quot; max=&quot;400&quot; value=&quot;50&quot; class=&quot;range&quot; style=&quot;text-align:right;&quot;&gt;

答案1

得分: 1

  • 使用 data-* 属性来存储当前值（以及所需的前缀，如 "music:）
  • 使用 ::after 伪元素来创建文本提示的工具提示
  • 使用 CSS content 属性和 attr(data-*) 来输出数据属性
  1. <!-- 开始代码片段: js 隐藏: false 控制台: true babel: false -->
  3. <!-- 语言: lang-js -->
  4. const rangeTooltip = (elRange) => {
  5.   elRange.dataset.value = `${elRange.querySelector("[type=range]").value}%`;
  6. };
  8. const range = (elRange) => {
  9.   elRange.addEventListener("input", () => rangeTooltip(elRange));
  10.   rangeTooltip(elRange);
  11. };
  13. document.querySelectorAll(".range").forEach(range);
  15. <!-- 语言: lang-css -->
  16. body {
  17.   background: #2b2219;
  18.   font: 16px/1.4 sans-serif;
  19. }
  21. .range {
  22.   position: relative;
  23.   width: 220px;
  24. }
  26. .range::after {
  27.   position: absolute;
  28.   top: 0;
  29.   bottom: 0;
  30.   left: 0;
  31.   right: 0;
  32.   display: flex;
  33.   justify-content: center;
  34.   align-items: center;
  35.   content: attr(data-prefix) attr(data-value);
  36.   color: #fff;
  37.   opacity: 0.7;
  38.   pointer-events: none; /* 防止指针交互 */
  39. }
  41. input[type=range] {
  42.   appearance: none;
  43.   width: inherit;
  44.   cursor: pointer;
  45. }
  47. input[type=range]:focus {
  48.   outline: none;
  49. }
  51. input[type=range]::-webkit-slider-runnable-track {
  52.   height: 2rem;
  53.   box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #fff1;
  54.   background: #2b2b2b;
  55. }
  57. input[type=range]::-webkit-slider-thumb {
  58.   appearance: none;
  59.   box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #fff2;
  60.   height: 100%;
  61.   width: 1rem;
  62.   border-radius: 3px;
  63.   background: #6d6e70;
  64.   cursor: pointer;
  65.   border-radius: 0;
  66. }
  68. input[type=range]:focus::-webkit-slider-runnable-track {
  69.   background: #313131;
  70. }
  72. <!-- 语言: lang-html -->
  73. <div class="range" data-prefix="Music:">
  74.   <input type="range" min="0" max="100" value="100">
  75. </div>
  77. <div class="range" data-prefix="Effects:">
  78.   <input type="range" min="0" max="100" value="100">
  79. </div>
  81. <div class="range" data-prefix="Difficulty:">
  82.   <input type="range" min="0" max="100" value="50">
  83. </div>
  85. <!-- 结束代码片段 -->

此外：

  • &lt;center&gt; 已弃用。请使用 CSS 代替。
  • 避免内联的 style 和 on* 处理程序属性。
英文:
  • Use data-* attribute to store the current value (and the desired prefix like "music:)
  • use ::after pseudo to create your tooltip for the textual tooltip value
  • use CSS content property and attr(data-*) to print the data attributes

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const rangeTooltip = (elRange) =&gt; {
  2. elRange.dataset.value = `${elRange.querySelector(&quot;[type=range]&quot;).value}%`;
  3. };
  4. const range = (elRange) =&gt; {
  5. elRange.addEventListener(&quot;input&quot;, () =&gt; rangeTooltip(elRange));
  6. rangeTooltip(elRange);
  7. };
  8. document.querySelectorAll(&quot;.range&quot;).forEach(range);

<!-- language: lang-css -->

  1. body {
  2. background: #2b2219;
  3. font: 16px/1.4 sans-serif;
  4. }
  5. .range {
  6. position: relative;
  7. width: 220px;
  8. }
  9. .range::after {
  10. position: absolute;
  11. top: 0;
  12. bottom: 0;
  13. left: 0;
  14. right: 0;
  15. display: flex;
  16. justify-content: center;
  17. align-items: center;
  18. content: attr(data-prefix) attr(data-value);
  19. color: #fff;
  20. opacity: 0.7;
  21. pointer-events: none; /* prevent pointer interaction */
  22. }
  23. input[type=range] {
  24. appearance: none;
  25. width: inherit;
  26. cursor: pointer;
  27. }
  28. input[type=range]:focus {
  29. outline: none;
  30. }
  31. input[type=range]::-webkit-slider-runnable-track {
  32. height: 2rem;
  33. box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #fff1;
  34. background: #2b2b2b;
  35. }
  36. input[type=range]::-webkit-slider-thumb {
  37. appearance: none;
  38. box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #fff2;
  39. height: 100%;
  40. width: 1rem;
  41. border-radius: 3px;
  42. background: #6d6e70;
  43. cursor: pointer;
  44. border-radius: 0;
  45. }
  46. input[type=range]:focus::-webkit-slider-runnable-track {
  47. background: #313131;
  48. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;range&quot; data-prefix=&quot;Music:&quot;&gt;
  2. &lt;input type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot; value=&quot;100&quot;&gt;
  3. &lt;/div&gt;
  4. &lt;div class=&quot;range&quot; data-prefix=&quot;Effects:&quot;&gt;
  5. &lt;input type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot; value=&quot;100&quot;&gt;
  6. &lt;/div&gt;
  7. &lt;div class=&quot;range&quot; data-prefix=&quot;Difficulty:&quot;&gt;
  8. &lt;input type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot; value=&quot;50&quot;&gt;
  9. &lt;/div&gt;

<!-- end snippet -->

Also:

  • &lt;center&gt; is deprecated. Use CSS instead
  • avoid inline style and on* handler attributes

huangapple
  • 本文由 发表于 2023年5月28日 16:48:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/76350669.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定