How can I stylize the numbers to be above the input and change the slider itself?
<input type="range" id="fader" name="timeshool" list="volsettings" /> <datalist id="volsettings"> <option>30</option> <option>45</option> <option>60</option> <option>90</option> <option>120</option> </datalist> 
Numbers added, and styling can be done here http://danielstern.ca/range.css/
<input type="text" id="test"/><br/> <input type="range" id="fader" name="timeshool" list="volsettings" oninput="document.querySelector('#test').value=this.value" /> <datalist id="volsettings"> <option>30</option> <option>45</option> <option>60</option> <option>90</option> <option>120</option> </datalist> 
If in this case you can use the script, then a great option is to connect the jQueryUI library https://jqueryui.com/slider/ . With it, you can very easily stylize sliders. Here is the simplest example from the resource itself, which I slightly modified for your task:
<script> $( function() { $( "#slider" ).slider({ range: "min", min: 0, max: 100, value: 60, slide: function( event, ui ) { $( "#amount" ).val( ui.value ); } }); $( "#amount" ).val( $( "#slider" ).slider( "value" ) ); }); </script> <p> <label for="amount">Fade:</label> <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider" style="height:200px;"></div> 
Source: https://ru.stackoverflow.com/questions/919745/
All Articles