Question

我有一个范围输入，它有圆形处理程序。我使用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;
}

Answer 1

这是一个涵盖上述两个方面的答案。您还可以在同一页面上拥有多个范围输入，并且所有输入都可以单独使用。

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

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>

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

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链接。

希望这有帮助。

Answer 2

我建议不要使用canvas作为背景的跨浏览器解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

<input type="range" min="0" max="10" data-value="3" />

＆＃13;

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

fiddle

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

当值发生变化时，在范围输入的处理程序上显示所选值

3 个答案: