How to create a dynamic textarea showing value of input slider using jQuery/Javascript? -
suppose there input[type=range]
. use jquery (or javascript) dynamically create textbox
show value of input
when being changed. textbox
floating below input
slider knob/arrow/dot. also, after value change completed, textbox should automatically hidden/removed. how go it?
this pretty simple
var ismousedown = false; $('#slider').mousedown(function(e){ ismousedown = true; $('#val').show().css({left:e.clientx,top:$(this).offset().top + $(this).height()}).val(this.value); }) .mousemove(function(e){ if(ismousedown){ $('#val').show().css({left:e.clientx,top:$(this).offset().top + $(this).height()}).val(this.value); } }) .mouseup(function(){ ismousedown = false; $('#val').hide(); });
#val{ position:absolute; display:none; width:20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id="slider" type="range" min="0" max="100"> <input id="val" type="text">
you should wrap in jquery plugin if you're going reuse multiple times on page
Comments
Post a Comment