Get range input value to css using Javascript

Question

I did code a simple css process bar. I need to get range or textbox value to Div width <div style="width:50%;">, When the user change value of range or textbox like textbox takes range value in this code. Can I do it using javascript? *I'm not good with JS so no idea how do I start! Is it possible to do?

here's my simple code:

.graph {
width:200px; margin-left:25px; height:20px;
background: rgb(168,168,168);
background: -moz-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(204,204,204,1) 23%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(168,168,168,1)), color-stop(23%,rgba(204,204,204,1)));
background: -webkit-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
background: -o-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
background: -ms-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#cccccc',GradientType=0 );
background: linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
position: relative;
  }
#bar {
background:#09C; height:20px;               
}

<div id="progress" class="graph"><div id="bar" style="width:50%;"></div></div>
<br>
<form>
<input type="range" min="0" max="100"  step="5" onchange="rangevalue.value=value" id="textvalue" />
<br>
<input type="text" maxlength="3" id="rangevalue" onchange="textvalue.value=value">
</form>

Jamiec · Accepted Answer · 2014-11-19 15:55:44Z

3

Simple, just hook up a change event to the slider & textbox, and adjust the bar appropriately.

$(document).on('change','#rangevalue, #textvalue',function(){
  $('#bar').css('width',$(this).val() + '%');
  });

.graph {
width:200px; margin-left:25px; height:20px;
background: rgb(168,168,168);
background: -moz-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(204,204,204,1) 23%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(168,168,168,1)), color-stop(23%,rgba(204,204,204,1)));
background: -webkit-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
background: -o-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
background: -ms-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#cccccc',GradientType=0 );
background: linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
position: relative;
  }
#bar {
background:#09C; height:20px;               
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progress" class="graph"><div id="bar" style="width:50%;"></div></div>
<br>
<form>
<input type="range" min="0" max="100"  step="5" onchange="rangevalue.value=value" id="textvalue" />
<br>
<input type="text" maxlength="3" id="rangevalue" onchange="textvalue.value=value">
</form>

answered Nov 19, 2014 at 15:55

Jamiec

136k15 gold badges141 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dynamic Remo Over a year ago

@VarunaLex Just change this $(document).on('input change', to $(document).on('input change', and you can have realtime change in the CSS Bar. Cheers,

Tomanow · Accepted Answer · 2014-11-19 16:05:10Z

1

Alternatively, you could use the jQueryUI slider library to do something like this:

FIDDLE

$(function () {
    var $slider = $("#slider-range-min").slider({
        range: "min",
        value: $('#amount').val(),
        min: 0,
        max: 100,
        step: 5,
        slide: function (event, ui) {
            $("#amount").val(ui.value);
        }
    });
    $("#amount").keyup(function(e) {
        $slider.slider('value', $(this).val());   
    });
});

HTML

<p>
    <label for="amount">Progress</label>
    <input type="number" id="amount" value="20" style="border:1; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-min"></div>

answered Nov 19, 2014 at 16:05

Tomanow

7,3953 gold badges30 silver badges52 bronze badges

Comments

Billy · Accepted Answer · 2014-11-19 16:32:37Z

~updated to change the textbox.

function changeGraph(rangeValue){
  document.getElementById('bar').style.width=rangeValue+"%";
  document.getElementById('rangevalue').value=rangeValue;
}

.graph {
width:200px; margin-left:25px; height:20px;
background: rgb(168,168,168);
background: -moz-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(204,204,204,1) 23%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(168,168,168,1)), color-stop(23%,rgba(204,204,204,1)));
background: -webkit-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
background: -o-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
background: -ms-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#cccccc',GradientType=0 );
background: linear-gradient(top, rgba(168,168,168,1) 0%,rgba(204,204,204,1) 23%);
position: relative;
  }
#bar {
background:#09C; height:20px;               
}

<div id="progress" class="graph"><div id="bar" style="width:50%;"></div></div>
<br>
<form>
<input type="range" min="0" max="100"  step="5" onchange="changeGraph(this.value)" />
<br>
<input type="text" maxlength="3" id="rangevalue" >
</form>

Collectives™ on Stack Overflow

Get range input value to css using Javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related