javascript - check if input is between two int or float then display or not display content -

in javascript need check whiwh value user enter in html input this:

<input type="text" id="volume" class="form-control" name="voilume"></input>  <div id"button"></div> 

ineed know if input between 0,5 , 8 (so have int , float can understand).

so value has >= 0,5 , <= 8

if value input if between 0,5 , 8 have display button, else nothing do. need prevent if user change value many times.

so if enters 3 display button in div id=button", if changes value 2 example keep displaying button, if changes value input 100 need remove button in div id="button".

for tried in order test if works:

var input= $('#volume').val();     if (input >= 0.5 && input <= 8) {         $('#button').html('ok');     } else {       $('#button').empty();     } 

but not work.

you can exploit css constraint validation here little bit. seems me x/y problem. actually, set our min, max , step values <input> element , let browser validation:

<input type="number" min="0.5" max="8" step="0.1" required id="volume" class="form-control" name="voilume"> 

alongside this, can make usage of pseudo css selectors :valid , :invalid so:

input:valid~div#button {   display: block; }  input:invalid~div#button {   display: none; } 

this have effect, if enter valid value in our input control, button displayed. if not, button disappears. magic!

example: https://jsfiddle.net/4q1fjqwp/