CODEWITHSUNDEEP
javascriptjqueryhtmlcss
XT_Nova
XT_Nova

Reputation: 1170

How can i display the input range-value while choosing the range?

How can i display the value of the input range, while someone is choosing a range?

<table>
    <tr>
       <td>Temp: </td>
       <td>
           <span>[RANGE VALUE HERE]<span>
           <input type="range" value="75">
       </td>
   </tr>
</table>

Upvotes: 1

Views: 227

Answers (3)

Venkata Krishna
Venkata Krishna

Reputation: 15112

You can use this jsFiddle DEMO

EDITED for color:

$('span').text($('[type=range]').val());
$('[type=range]').change(function () {
    var myspan = $('span');
    myspan.text(this.value);
    if (this.value < 50) {
        myspan.css('color', 'blue');
    } else {
        myspan.css('color', 'black');
    }
});

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

jQuery(function () {
    $('input[type="range"]').change(function () {
        $(this).prev('span').text(this.value)
    })
})

Demo: Fiddle

Upvotes: 0

pax162
pax162

Reputation: 4735

Try this (fiddle: http://jsfiddle.net/3enxx/1/):

html:

<table>
    <tr>
       <td>Temp: </td>
       <td>
           <div id="vv">[RANGE VALUE HERE]</div>
            <input id="rn" type="range" value="75" />
       </td>
   </tr>
</table>

js:

$("#rn").change(function(){
    $("#vv").text(this.value);
})

Upvotes: 0

Related Questions