Display the selected value on the range input handler when the value changes

Question

Display the selected value on the range input handler when the value changes

I have a range input that has a circle handler. I used css to make the handler look like a circle. Now when I am trying to find a way to show the value selected inside this circle. But I haven't found a way to do this even after a long time. And here I am. Is there a way to do the same? and one more thing, I need to fill the colors to the left and right of the handler based on the selected value. Can you suggest how I should do this? Any help would be appreciated.

Here is the code I used

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

+3

javascript jquery css html5

KarthickN 04 nov. 14 at 13:23

source to share

3 answers

I can suggest a not very cross-browser solution using canvas as background:

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

Run code Hide result

+2

dfsq 04 nov. At 14:02

source to share

I have some solution that should work cross-browser, but it is pretty ugly and has the problem that there is text above the button that makes it accessible only to the sides (if anyone has a solution for this please feel free to to tell):

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

the offsets on the slider are for testing purposes only

+2

Markai 04 nov. 14 at 14:15

source to share

Vishal s mujumdar · Accepted Answer · 2014-11-04T16:18:33+0000

Here is an answer that covers both of the aspects mentioned. You can also have multiple range inputs on the same page and everything will work individually.

Note . I used a couple of lines of Markai code . Thanks to him.

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

Here is a jsFiddle link .

Hope it helps.

Display the selected value on the range input handler when the value changes

More articles: