Question

这是一个奇怪的要求;但是，在滑块的拇指上显示HTML5范围滑块的值的最佳方法是什么？！拇指将动画onLoad所以它必须跟随拇指;此外，这将显示 iPad

示例：

enter image description here

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

Answer 1

您无法在拇指中显示值，但可以在拇指上附加一个气泡，该气泡将包含并在您滑动时显示该值。请参阅此详细文章Show slider value。

这是demo。

Answer 2

Webkit允许您使用css定位拇指：

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

这将在拇指上打印test。但是，使用attr（value）似乎不起作用，所以我不知道如何显示该值。也许你可以通过使用css变量并使用javascript更改它来找到一种方法。

其他浏览器的等效内容为::-moz-range-thumb和::-ms-thumb。

编辑：这真的是（真的！）一种肮脏的方式，但只要你的价值范围相对有限，它就可行，并且它是可行的。

HTML：

<input class="range-consideration" type="range" min="1" max="10" value="3" onchange="this.setAttribute('value', this.value);" />

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

我也很难找到一种方法可以在其拇指上显示范围滑块的值。解决此问题时，我想到了三种方法：

1。组合多个伪元素

（破坏者：不起作用-阅读BoltClock对this thread的公认答案的评论）

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：

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

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
}

我认为通过使用CSS变量可以避免无法直接更改JavaScript中伪元素的属性的问题，我非常聪明。但是，我了解到，这种方法行不通，因为在同一选择中不能使用多个伪元素选择器。（请参阅上面的链接）。

2。使用JavaScript动态更改拇指的`content`属性

此方法与以前的方法非常相似。唯一的区别在于CSS。（扰流器：此方法也无效）

CSS：

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

JavaScript与以前完全相同。这个想法是，附加到滑块元素的事件侦听器侦听输入事件，并通过更改CSS变量--thumbNumber的值来做出反应。这将导致拇指的content属性更新~~并显示更改~~。但是，这不起作用，因为CSS似乎无法让您更改拇指的content属性。

3。使用CSS变量和...图像...

就脏解决方案而言，这基本上和它一样糟糕。这是完全不可扩展的，但是当在输入范围内使用少于10个数字时，这只是一点点令人讨厌。

对于此示例，我在大约10分钟内在photoshop中制作了10个png文件。每个文件都是透明背景上的数字的30px x 30px图像。它们的文件名是 1.png ， 2.png ， 3.png ，依此类推，直到 10.png 。每个文件都存储在名为 png 的文件夹中。该文件夹与html文档位于同一文件夹中。

CSS：

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

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

JavaScript：

window.onload = function () {
    var slider = document.getElementById("slider");
    slider.addEventListener("input", function () {
        document.body.style.setProperty("--sliderImage", "url('png/" + this.value + ".png')");
    });
}

这个例子显然在很多方面都很糟糕，但是我尝试过的所有方法都奏效了。

基本上，这样做是为了使当滑块元素接收到输入时，将滑块大拇指拖动到值6时，CSS变量--sliderImage的值将更改为url('png/6.png')。这导致拇指的background-image属性可更新为正确代表滑块值的图片。

我仍在寻找并试图为这个问题提供一个实际，合理的答案。这让我感到困惑，实际上，这样一个看似简单的任务如何变得非常分层和困难。找出答案后，我将立即编辑答案。

Answer 4

您创建一个跟随句柄的div。
然后，每次移动/更改句柄（onslide / onchange）时，将处理程序的值放到div中，并修改div的当前位置与句柄相同，以便它跟随句柄。

或者，如果可能的话，在滑块的 onchange 方法上获取句柄的id并放入

  $('#handle').text($(this).val());

我只是在这里给你一些想法。我相信会有更好的答案。

Answer 5

这＆＃34;解决方法＆＃34;它上面有很多很多的口红......但是有可能通过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()) });
});

如何在Slider的拇指上显示Range Slider的值？

5 个答案:

1。组合多个伪元素

2。使用JavaScript动态更改拇指的`content`属性

3。使用CSS变量和...图像...

如何在Slider的拇指上显示Range Slider的值？

5 个答案:

1。组合多个伪元素

2。使用JavaScript动态更改拇指的content属性

3。使用CSS变量和...图像...

2。使用JavaScript动态更改拇指的`content`属性