如何在“滑块”的拇指上显示“范围滑块”的值？

Question

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?! 但是，在滑块的拇指上显示HTML5范围滑块的值的最佳方法是什么？ the thumb will be animated onLoad so it must follow the thumb; 拇指将在onLoad上设置动画，因此它必须跟随拇指； moreover, this will be displayed for iPad 此外，这将在iPad上显示

EXAMPLE: 例：

在此处输入图片说明

<input class="range-consideration" type="range" name="points" min="1" max="10" ng-model="rangeConsiderations">

Answer 1

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 . 这是一个演示。

Answer 2

Webkit allows you to target the thumb with css : Webkit允许您使用css定位拇指：

.range-consideration::-webkit-slider-thumb::before {
    content: "test";
}

That will print test on the thumb. 那会在拇指上打印test 。 However, using attr(value) doesn't seem to work, so I don't know how to show the value. 但是，使用attr（value）似乎不起作用，所以我不知道如何显示该值。 Maybe you can find a way by playing with css variables and changing it with javascript. 也许您可以通过使用CSS变量并使用javascript进行更改来找到一种方法。

The equivalent for other browsers are ::-moz-range-thumb and ::-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; }

Answer 3

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对此线程的可接受答案的评论）

CSS: CSS：

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);
}

HTML: HTML：

<body>
  <input type="range" id="slider" value="5" min="1" max="10" />
</body>

JavaScript: JavaScript的：

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. 我认为通过使用CSS变量可以避免无法直接更改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). （请参阅上面的链接）。

2. Dynamically changing the thumb's `content` property with JavaScript 2.使用JavaScript动态更改Thumb的`content`属性

This method is very similar to the previous one. 此方法与以前的方法非常相似。 The only difference is in the CSS. 唯一的区别在于CSS。 (Spoiler: This method also didn't work) （扰流器：此方法也无效）

CSS: CSS：

#slider::-webkit-slider-thumb {
  content: var(--thumbNumber);
}

The JavaScript is the exact same as before. JavaScript与以前完全相同。 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 . 这个想法是，附加到slider元素的事件侦听器侦听输入事件，并通过更改CSS变量--thumbNumber的值做出反应。 This causes the content property of the thumb to update ~~and display the change~~ . 这将导致拇指的content属性更新 ~~并显示更改~~ 。 This doesn't work, however, because CSS doesn't seem to let you change the content property of the thumb. 但是，这不起作用，因为CSS似乎无法让您更改Thumb的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. 对于此示例，我在大约10分钟内在photoshop中制作了10个png文件。 Each file is a 30px by 30px image of a number on a transparent background. 每个文件都是透明背景上的数字的30px x 30px图像。 Their filenames are 1.png , 2.png , 3.png , and so on until 10.png . 它们的文件名是1.png ， 2.png ， 3.png ，依此类推，直到10.png为止。 Each file is stored in a folder called png . 每个文件都存储在一个名为png的文件夹中。 This folder is located in the same folder as the html document. 该文件夹与html文档位于同一文件夹中。

CSS: CSS：

body {
  --sliderImage: url("png/5.png");
}

#slider::-webkit-slider-thumb {
  background-image: var(--sliderImage);
}

JavaScript: JavaScript的：

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 --sliderImage is changed to, for example, url('png/6.png') when the slider thumb is dragged onto the value 6. This causes the background-image property of the thumb to update to a picture that correctly represents the value of the slider. 基本上，这样做是为了使当滑块元素接收输入时，将滑块拇指拖动到值6时，CSS变量--sliderImage的值--sliderImage改为url('png/6.png') 。。这将导致拇指的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. 找出答案后，我将立即编辑答案。

Answer 4

You create a div that will follow the handle. 您创建一个将遵循该句柄的div。
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. 然后，每次移动/更改手柄（onslide / onchange）时，将处理程序的值放入div，并与该手柄相同地修改div的当前位置，以使其跟随该手柄。

or maybe, if possible, on onchange method 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. 我敢肯定会有更好的答案。

Answer 5

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是可能的。answer 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()) });
});

如何在“滑块”的拇指上显示“范围滑块”的值？

问题描述

5 个解决方案

解决方案1
1 已采纳 2014-05-26 08:11:12

解决方案2
1 2014-05-26 08:22:39

解决方案3
1 2018-07-21 04:52:54

1. Combining multiple pseudo-elements 1.合并多个伪元素

2. Dynamically changing the thumb's `content` property with JavaScript 2.使用JavaScript动态更改Thumb的`content`属性

3. Using CSS Variables and... images... 3.使用CSS变量和...图像...

解决方案4
0 2014-05-26 08:15:31

解决方案5
0 2015-03-18 16:06:42

如何在“滑块”的拇指上显示“范围滑块”的值？

问题描述

5 个解决方案

解决方案1 1 已采纳 2014-05-26 08:11:12

解决方案2 1 2014-05-26 08:22:39

解决方案3 1 2018-07-21 04:52:54

1. Combining multiple pseudo-elements 1.合并多个伪元素

2. Dynamically changing the thumb's content property with JavaScript 2.使用JavaScript动态更改Thumb的content属性

3. Using CSS Variables and... images... 3.使用CSS变量和...图像...

解决方案4 0 2014-05-26 08:15:31

解决方案5 0 2015-03-18 16:06:42

解决方案1
1 已采纳 2014-05-26 08:11:12

解决方案2
1 2014-05-26 08:22:39

解决方案3
1 2018-07-21 04:52:54

2. Dynamically changing the thumb's `content` property with JavaScript 2.使用JavaScript动态更改Thumb的`content`属性

解决方案4
0 2014-05-26 08:15:31

解决方案5
0 2015-03-18 16:06:42