我有一个圆形输入处理程序的范围输入。我使用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的代码。多亏了他

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

    希望这可以帮助。

    09-17 18:33
    查看更多