在值更改时在范围输入的处理程序上显示所选值

Showing the selected value on the handler of range input as the value changes

本文关键字：程序上 显示 处理 输入 范围      更新时间：2023-09-26

我有一个具有圆形处理程序的范围输入。我使用css使处理程序看起来像圆形。现在，我正试图找到一种方法来显示在圆圈内选择的值。但即使过了很长时间，我也没有找到任何方法来做到这一点。我来了。有没有同样的方法？还有一件事我需要根据所选的值填充处理程序左侧和右侧的颜色。你能建议我怎么做吗？如有任何帮助，我们将不胜感激。

这是我使用的代码

<input type="range" min="0" max="10"/>
input[type=range]{
    -webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #e95e57;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: white;
    margin-top: -14px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

这里有一个涵盖上述两个方面的答案。您也可以在同一页面上有多个范围输入，所有输入都将单独工作。

注意：我确实使用了Markai的代码中的几行。谢谢他。

  1. HTML

    <div class="range-wrapper">
  <input type="range" min="0" max="10" id="myRange"/>
  <div class="text">1</div>
</div>
<div class="range-wrapper">
  <input type="range" min="0" max="10" id="mySecondRange"/>
  <div class="text">1</div>
</div>

  2. jQuery

    $(document).ready(function(){
  updateRangeValue($('input[type=range]'));
  $('input[type=range]').on('input change',function(){
    var input = $(this);
    updateRangeValue(input);
  });    
});
function getRangeGradient(color1,color2,value,maximum){
  var gradient = "linear-gradient(to right, ";
  var breakPoint = (value/maximum)*100;
  var attrValue = gradient + color1 + " 0%, " + color1 + " " + breakPoint + "%, " + color2 + " " + breakPoint + "%, " + color2 + " 100%)";
  return attrValue;
}
function updateRangeValue(input){
  var selectedColor = "#428bca";
  var nonSelectedColor = "#ddd";
  var value = input.val();
  var maximum = input.attr('max'); 
  var inputWidth = input.width();
  var background = getRangeGradient(selectedColor, nonSelectedColor, value, maximum);
  var offLeft = Math.floor((value / maximum) * inputWidth - (((value / maximum) * inputWidth - inputWidth/2) / 100) * 24);    
  var offLeftAbs = value == maximum ? input.offset().left - 15 + offLeft : input.offset().left - 10 + offLeft;
  input.next('.text').css({'left': offLeftAbs +'px'});
  input.next('.text').html(value);
  input.css('background', background); 
}

  3. CSS

    .range-wrapper {
  overflow: hidden;
  padding: 5px 0px;    
} 
.range-wrapper > div {
  position: relative;
  top: -15px;
  width: 5px;
}
.range-wrapper > .text {
  pointer-events: none;
}
input[type=range]{
  -webkit-appearance: none;
  background: linear-gradient(to right, #428bca 0%, #428bca 50%, #ddd 50%, #ddd 100%);
}
input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 5px;   
  border: none;
  border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #e95e57;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background: white;
  margin-top: -14px;
  cursor: pointer;
}
input[type=range]:focus {
  outline: none;
  background: linear-gradient(to right, #428bca 0%, #428bca 50%, #ddd 50%, #ddd 100%);
}

这是jsFiddle链接。

希望这能有所帮助。

我可以建议使用画布作为背景的跨浏览器解决方案：

function renderValue(value) {
    var ctx = document.getCSSCanvasContext('2d', 'value', 32, 32);
        
    ctx.fillStyle = '#FFF';
    ctx.fillRect(0, 0, 32, 32);
    
    ctx.font = 'bold 18px Arial';
    ctx.fillStyle = '#888';
    ctx.textAlign = 'center'; 
    ctx.fillText(value, 15, 21);
}
var input = document.querySelector('input')
input.oninput = function() {
    renderValue(this.value);
}
renderValue(input.value);
input[type=range] {
    -webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #e95e57;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    margin-top: -14px;
    background: -webkit-canvas(value) no-repeat 0 0;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}
div.test  {
    background: -webkit-canvas(clouds) no-repeat 0 0;
    height: 100px;
    width: 100px;
    border: 1px red solid;
}
canvas {
    border: 1px red solid;
}
<input type="range" min="0" max="10" data-value="3" />

我有一种解决方案，应该可以跨浏览器工作，但它很难看，而且有问题，按钮上有一个文本，使其只能在两侧拖动（如果有人对此有解决方案，请随时告知）：

HTML

<input id="range" type="range" min="0" max="10"/>
<div id="rangeval">0</div>

JavaScript

function updateRangeVal(){
    var offLeft = Math.floor(($('#range').val() / $('#range').attr('max')) * $('#range').width() - ((($('#range').val() / $('#range').attr('max')) * $('#range').width() - $('#range').width()/2) / 100) * 24);
    var offLeftAbs = $('#range').offset().left - 8 + offLeft;
    $('#rangeval').css({"top": ($('#range').offset().top-8)+"px", "left": offLeftAbs +"px"});
    $('#rangeval').html($('#range').val());
}
$('#range').on('input', function(){
    updateRangeVal();
});
updateRangeVal();

CSS

#rangeval{
    position: absolute;
    height: 16px;
    width: 16px;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input[type=range]{
    -webkit-appearance: none;
    position: absolute;
    left: 200px;
    top: 300px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #e95e57;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: white;
    margin-top: -14px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

小提琴

滑块上的偏移仅用于测试目的

相关文章：