range demo

by Marcus

HTML

<form>
    	<input type="range" id="fader1" min="0" max="20" style="width:44%;" list="data1" value="0" step="1" oninput="outputUpdate(value)"/>
        <datalist id="data1">
        	  <option>0</option>
        	  <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
        	  <option>12</option>
            <option>13</option>
            <option>14</option>
            <option>15</option>
            <option>16</option>
            <option>17</option>
            <option>18</option>
            <option>19</option>
            <option>20</option>
        </datalist>
        <output for="fader1" id="val1"></output>
        <script>
        function outputUpdate(val) {
	document.querySelector('#val1').value = val;
}
		</script>
    </form>