css - Can't correctly place HTML5 Slider output -
not entirely sure how can phrase question correctly, apologies that. want happen here "output" displayed right next slider, , not beneath it.
to see wrong: alainbruno.nl/form.html
at rate, i'm starting html5, , code far:
<!doctype html> <html lang = "en"> <head> <title>character creation</title> </head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(function(){ //range var val = $('#slider').val(); output = $('#output'); output.html(val); $('#slider').on('change', function(){ output.html(this.value); }); }); </script> <body> <h1>form</h1> <form> <fieldset> <legend>appearance</legend> <p> <label> select race: </label> <select id="race"> <option value="human">human</option> <option value="faela">faela</option> <option value="domovoi">domovoi</option> <option value="arcon">arcon</option> <option value="tsaaran">tsaaran</option> </select> </p> <p> <label>select gender</label> <select id="gender"> <option value="male">male</option> <option value="female">female</option> <option value="other">other</option> </select> </p> <p> <label for="range">select age:</label> <input type="range" min="14" max="60" id="slider" value="10" name="range"> <div id="output"></div> </p> </fieldset> </form> </body> </html>
just make <div> holds value <span> displays inline:
<p> <label for="range">select age:</label> <input type="range" min="14" max="60" id="slider" value="10" name="range"> <span id="output"></span> </p> see this plunk: http://plnkr.co/edit/elffjf?p=preview
alternatively, use css set <div> display:inline, that'd anti-patten imho, seeing <span> exists, , is, default display:inline
Comments
Post a Comment