range demo

by Marcus

HTML

<body>
	<form>
    	<input type="range" id="fader1" min="1" max="10" 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>
        </datalist>
        <output for="fader1" id="val1">0</output>
        <script>
        function outputUpdate(val) {
	document.querySelector('#val1').value = val;
}
		</script>
    </form>
</body>