javascript 如何在滑块的拇指上显示范围滑块的值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23865523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show the value of Range Slider on the thumb of the Slider?
提问by Matthew Harwood
This is an odd request; However, what would be the best method to display the value of an HTML5 range-slider on the thumb of the slider?! the thumb will be animated onLoad so it must follow the thumb; moreover, this will be displayed for iPad
这是一个奇怪的要求；但是，在滑块的拇指上显示 HTML5 范围滑块的值的最佳方法是什么？！拇指将在加载时动画，因此它必须跟随拇指；此外，这将在iPad上显示
EXAMPLE:
例子：
<input class="range-consideration" type="range" name="points" min="1" max="10" ng-model="rangeConsiderations">
采纳答案by scottydelta
You cannot display value in the thumb but you can attach a bubble to the thumb which will contain and display the value as you slide. Refer to this detailed article Show slider value.
您无法在拇指中显示值，但可以在拇指上附加一个气泡，该气泡将在您滑动时包含并显示该值。请参阅这篇详细的文章显示滑块值。
Here's a demo.
这是一个演示。
回答by Noah
I too have had a lot of trouble figuring out a way to display the value of a range slider on its thumb. When working this out, I thought of three methods:
我也在想办法在其拇指上显示范围滑块的值时遇到了很多麻烦。在解决这个问题时，我想到了三种方法：
1. Combining multiple pseudo-elements
1.组合多个伪元素
(Spoiler: Doesn't work - Read BoltClock's comment on the accepted answer of this thread)
（剧透：不起作用 - 阅读BoltClock对该线程已接受答案的评论）
body {
--thumbNumber: "5"; // updates on slider input via JavaScript function
}
#slider {
-webkit-appearance: none;
outline: none;
width: 400px;
height: 3px;
background-color: #555;
}
#slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
cursor: pointer;
background: #5a5;
}
#slider::-webkit-slider-thumb::before { // doesn't work (refer to above link)
content: var(--thumbNumber);
}
<body>
<input type="range" id="slider" value="5" min="1" max="10" />
</body>
window.onload = function () {
var slider = document.getElementById("slider");
slider.addEventListener("input", function () {
document.body.style.setProperty("--thumbNumber", "'" + this.value + "'");
});
// whenever this element receives input, change the value of --thumbNumber to this element's value
}
I thought I was pretty clever by using CSS variables to avoid the problem of not being able to directly change the properties of a pseudo-element in JavaScript. I learned, however, that this approach cannot work because you cannot use more than one pseudo-element selector in the same selection. (Refer to above link).
我认为我很聪明，通过使用 CSS 变量来避免无法直接更改 JavaScript 中伪元素的属性的问题。然而，我了解到这种方法行不通，因为在同一个选择中不能使用多个伪元素选择器。（参考上面的链接）。
2. Dynamically changing the thumb's contentproperty with JavaScript
2.content用 JavaScript动态改变拇指的属性
This method is very similar to the previous one. The only difference is in the CSS. (Spoiler: This method also didn't work)
这种方法与前一种方法非常相似。唯一的区别在于 CSS。（剧透：这个方法也行不通）
#slider::-webkit-slider-thumb {
content: var(--thumbNumber);
}
The JavaScript is the exact same as before. The idea is that the event listener attached to the slider element listens for input events, and reacts by changing the value of the CSS variable --thumbNumber. This causes the contentproperty of the thumb to update and display the change. This doesn't work, however, because CSS doesn't seem to let you change the contentproperty of the thumb.
JavaScript 与以前完全相同。这个想法是附加到滑块元素的事件侦听器侦听输入事件，并通过更改 CSS 变量的值做出反应--thumbNumber。这会导致content拇指的属性更新并显示更改。但是，这不起作用，因为 CSS 似乎不允许您更改content拇指的属性。
3. Using CSS Variables and... images...
3. 使用 CSS 变量和...图像...
This is basically as bad as it gets when it comes to dirty solutions. This is completely unscalable, but it's only a little bit godawful when working with less than 10 numbers on an input range.
当涉及到肮脏的解决方案时，这基本上是一样糟糕。这是完全不可扩展的，但在输入范围内处理少于 10 个数字时，它只是有点可怕。
For this example, I made 10 png files in photoshop in about 10 minutes. Each file is a 30px by 30px image of a number on a transparent background. Their filenames are 1.png, 2.png, 3.png, and so on until 10.png. Each file is stored in a folder called png. This folder is located in the same folder as the html document.
对于这个例子，我在大约 10 分钟内在 photoshop 中制作了 10 个 png 文件。每个文件都是一个 30 像素 x 30 像素的透明背景上的数字图像。它们的文件名是1.png、2.png、3.png，依此类推，直到10.png。每个文件都存储在一个名为png的文件夹中。此文件夹与 html 文档位于同一文件夹中。
body {
--sliderImage: url("png/5.png");
}
#slider::-webkit-slider-thumb {
background-image: var(--sliderImage);
}
window.onload = function () {
var slider = document.getElementById("slider");
slider.addEventListener("input", function () {
document.body.style.setProperty("--sliderImage", "url('png/" + this.value + ".png')");
});
}
This example is obviously terrible in so many ways, but it's all I've been able to try that has worked.
这个例子在很多方面显然都很糟糕，但我所能尝试的一切都奏效了。
Basically, this makes it so that when the slider element receives input, the value of the CSS variable --sliderImageis changed to, for example, url('png/6.png')when the slider thumb is dragged onto the value 6. This causes the background-imageproperty of the thumb to update to a picture that correctly represents the value of the slider.
基本上，这使得当滑块元素接收到输入时，CSS 变量的值--sliderImage会更改为，例如，url('png/6.png')当滑块滑块拖动到值 6 时。这会导致滑块的background-image属性更新为图片正确表示滑块的值。
I am still searching for and trying to come up with an actual, reasonable answer to this problem. It puzzles me how such a seemingly simple task can, in reality, be very layered and difficult. I'll edit my answer as soon as I figure it out.
我仍在寻找并试图为这个问题提出一个实际、合理的答案。让我感到困惑的是，这样一个看似简单的任务，实际上却是非常复杂和困难的。我会在弄清楚后立即编辑我的答案。
回答by clintgh
- You create a div that will follow the handle.
- Then, every time the handle is moved/changed (onslide/onchange), put the value of the handler to the div and also modify the current position of the div the same with the handle so that it will follow the handle.
- 您创建一个将跟随句柄的 div。
- 然后，每次移动/更改手柄（onslide/onchange）时，将处理程序的值放入 div 并修改与手柄相同的 div 的当前位置，使其跟随手柄。
or maybe, if possible, on onchangemethod of the slider get the id of the handle and just put
或者，如果可能的话，在滑块的onchange方法上获取句柄的 id 并放置
$('#handle').text($(this).val());
I'm just giving you ideas here. I'm sure there will be better answers.
我只是在这里给你一些想法。我相信会有更好的答案。
回答by Sebastien C.
Webkit allows you to target the thumb with css :
Webkit 允许您使用 css 定位拇指：
.range-consideration::-webkit-slider-thumb::before {
content: "test";
}
That will print teston the thumb. However, using attr(value) doesn't seem to work, so I don't know how to show the value. Maybe you can find a way by playing with css variables and changing it with javascript.
这将打印test在拇指上。但是，使用 attr(value) 似乎不起作用，所以我不知道如何显示该值。也许您可以通过使用 css 变量并使用 javascript 更改它来找到一种方法。
The equivalent for other browsers are ::-moz-range-thumband ::-ms-thumb.
其他浏览器的等价物是::-moz-range-thumb和::-ms-thumb。
EDIT : This is really (really !) a dirty way, but it works and it's doable as long as you have a relatively limited range of values.
编辑：这真的（真的！）一种肮脏的方式，但它有效并且只要您的值范围相对有限，它就是可行的。
HTML :
HTML :
<input class="range-consideration" type="range" min="1" max="10" value="3" onchange="this.setAttribute('value', this.value);" />
CSS :
CSS :
.range-consideration[value="1"]::-webkit-slider-thumb::before { content: "1"; color: black; }
.range-consideration[value="2"]::-webkit-slider-thumb::before { content: "2"; color: black; }
.range-consideration[value="3"]::-webkit-slider-thumb::before { content: "3"; color: black; }
.range-consideration[value="4"]::-webkit-slider-thumb::before { content: "4"; color: black; }
.range-consideration[value="5"]::-webkit-slider-thumb::before { content: "5"; color: black; }
.range-consideration[value="6"]::-webkit-slider-thumb::before { content: "6"; color: black; }
.range-consideration[value="7"]::-webkit-slider-thumb::before { content: "7"; color: black; }
.range-consideration[value="8"]::-webkit-slider-thumb::before { content: "8"; color: black; }
.range-consideration[value="9"]::-webkit-slider-thumb::before { content: "9"; color: black; }
.range-consideration[value="10"]::-webkit-slider-thumb::before { content: "10"; color: black; }
回答by Corelgott
This "workaround" has lots and lots of lipstick on it... but it is possible with a automated derivation of Sebastien C. answer http://codepen.io/anon/pen/xbQoLj
这种“解决方法”上有很多口红……但是可以通过自动推导 Sebastien C. 回答http://codepen.io/anon/pen/xbQoLj
$(document).ready(function() {
var $daFoo = $('#foo');
var rule = "<style>";
// get mix & max of the slider
for(var i= parseInt($daFoo.attr("min")); i<= parseInt($daFoo.attr("max")); i++)
// for each value possible in this SINGLE!! slider - push a rule
rule += 'input[type=range][data-value="' + i + '"]::-webkit-slider-thumb::after { content: "' + i + '"; }';
$('head').append(rule + "</style>");
$daFoo.on('input', function() { $daFoo.attr('data-value', $daFoo.val()) });
});
