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

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

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

问题

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

<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

&lt;div class=&quot;range-wrap&quot;&gt;&lt;div class=&quot;bubble&quot;&gt;&lt;/div&gt;&lt;br&gt;
&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-*) 来输出数据属性
<!-- 开始代码片段: js 隐藏: false 控制台: true babel: false -->

<!-- 语言: lang-js -->
const rangeTooltip = (elRange) => {
  elRange.dataset.value = `${elRange.querySelector("[type=range]").value}%`;
};

const range = (elRange) => {
  elRange.addEventListener("input", () => rangeTooltip(elRange));
  rangeTooltip(elRange);
};

document.querySelectorAll(".range").forEach(range);

<!-- 语言: lang-css -->
body {
  background: #2b2219;
  font: 16px/1.4 sans-serif;
}

.range {
  position: relative;
  width: 220px;
}

.range::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  content: attr(data-prefix) attr(data-value);
  color: #fff;
  opacity: 0.7;
  pointer-events: none; /* 防止指针交互 */
}

input[type=range] {
  appearance: none;
  width: inherit;
  cursor: pointer;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 2rem;
  box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #fff1;
  background: #2b2b2b;
}

input[type=range]::-webkit-slider-thumb {
  appearance: none;
  box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #fff2;
  height: 100%;
  width: 1rem;
  border-radius: 3px;
  background: #6d6e70;
  cursor: pointer;
  border-radius: 0;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #313131;
}

<!-- 语言: lang-html -->
<div class="range" data-prefix="Music:">
  <input type="range" min="0" max="100" value="100">
</div>

<div class="range" data-prefix="Effects:">
  <input type="range" min="0" max="100" value="100">
</div>

<div class="range" data-prefix="Difficulty:">
  <input type="range" min="0" max="100" value="50">
</div>

<!-- 结束代码片段 -->

此外：

  • &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 -->

const rangeTooltip = (elRange) =&gt; {
elRange.dataset.value = `${elRange.querySelector(&quot;[type=range]&quot;).value}%`;
};
const range = (elRange) =&gt; {
elRange.addEventListener(&quot;input&quot;, () =&gt; rangeTooltip(elRange));
rangeTooltip(elRange);
};
document.querySelectorAll(&quot;.range&quot;).forEach(range);

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

body {
background: #2b2219;
font: 16px/1.4 sans-serif;
}
.range {
position: relative;
width: 220px;
}
.range::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
content: attr(data-prefix) attr(data-value);
color: #fff;
opacity: 0.7;
pointer-events: none; /* prevent pointer interaction */
}
input[type=range] {
appearance: none;
width: inherit;
cursor: pointer;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 2rem;
box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #fff1;
background: #2b2b2b;
}
input[type=range]::-webkit-slider-thumb {
appearance: none;
box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #fff2;
height: 100%;
width: 1rem;
border-radius: 3px;
background: #6d6e70;
cursor: pointer;
border-radius: 0;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #313131;
}

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

&lt;div class=&quot;range&quot; data-prefix=&quot;Music:&quot;&gt;
&lt;input type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot; value=&quot;100&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;range&quot; data-prefix=&quot;Effects:&quot;&gt;
&lt;input type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot; value=&quot;100&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;range&quot; data-prefix=&quot;Difficulty:&quot;&gt;
&lt;input type=&quot;range&quot; min=&quot;0&quot; max=&quot;100&quot; value=&quot;50&quot;&gt;
&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:

确定