1<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
1<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);">
2<input type="text" id="textInput" value="">
1<form>
2 <div>
3 <input id="rangeInput" type="range" min="0" max="200" oninput="amount.value=rangeInput.value" />
4 <input id="amount" type="number" value="100" min="0" max="200" oninput="rangeInput.value=amount.value" />
5 </div>
6</form>
1<input type="range" list="tickmarks">
2
3<datalist id="tickmarks">
4 <option value="0" label="0%"></option>
5 <option value="10"></option>
6 <option value="20"></option>
7 <option value="30"></option>
8 <option value="40"></option>
9 <option value="50" label="50%"></option>
10 <option value="60"></option>
11 <option value="70"></option>
12 <option value="80"></option>
13 <option value="90"></option>
14 <option value="100" label="100%"></option>
15</datalist>
16
1function updateTextInput(val) {
2 document.getElementById('textInput').value=val;
3 }