Отображение выбранного значения на обработчике входного диапазона при изменении значения

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 в. Спасибо ему.

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.

Надеюсь, это поможет.

Answer 2

я могу предложить не очень решение кроссбраузерный с помощью холста в качестве фона:

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" />

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

смещения на ползунке только для целей тестирования