input range

input range option label
input range拖動實時觸發事件

<datalist id="tickmarks"> <option value="0" >0</option> <option value="20">20</option> <option value="40">40</option> <option value="60">60</option> <option value="80">80</option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="volumeBox.innerHTML=this.value"> <span id="volumeBox" >50</span> <pre> <<c>datalist id="tickmarks"> <<c>option value="0" > 0 <<c>/option> <<c>option value="20"> 20 <<c>/option> <<c>option value="40"> 40 <<c>/option> <<c>option value="60"> 60 <<c>/option> <<c>option value="80"> 80 <<c>/option> <<c>option value="100">100<<c>/option> <<c>/datalist> <<c>input type="range" step="10" list="tickmarks" oninput="volumeBox.innerHTML=this.value"> <<c>span id="volumeBox" >50<<c>/span> <<c>style> input { width:400px } <<c>style> </pre> <style> input { width:400px } <style> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style

00

<datalist id="tickmarks"> <option value="0" > 0 </option> <option value="20"> 20 </option> <option value="40"> 40 </option> <option value="60"> 60 </option> <option value="80"> 80 </option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="volumeBox.innerHTML=this.value"> <span id="volumeBox" >50</span> <style> input[type=range]{ writing-mode: bt-lr; /* IE */ -webkit-appearance: slider-vertical; /* WebKit */ width: 30px; height: 300px; } </style> <pre> <<c>datalist id="tickmarks"> <<c>option value="0" > 0 <<c>/option> <<c>option value="20"> 20 <<c>/option> <<c>option value="40"> 40 <<c>/option> <<c>option value="60"> 60 <<c>/option> <<c>option value="80"> 80 <<c>/option> <<c>option value="100">100<<c>/option> </datalist> <<c>input type="range" step="10" list="tickmarks" oninput="volumeBox.innerHTML=this.value"> <<c>span id="volumeBox" >50<<c>/span> <<c>style> input[type=range]{ writing-mode: bt-lr; /* IE */ -webkit-appearance: slider-vertical; /* WebKit */ width: 30px; height: 300px; } <<c>/style> </pre> <style> pre{position:fixed ; top:10px ; left:150px;} input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style

00

<div id="co"> <style> #range { width:200px;border: 1px solid black; transform-origin: 100px 100px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } #range input { width:99%;margin: -15px 0 0 0;height:55px;} #volumeBox { width:410px;font-size: 15px; margin: -25px 0 0 200px; transform-origin: -210px -165px; transform: rotate(90deg); position: absolute; } #tickmarks { width:103%;margin: 0 0 0 0;display: flex;} #tickmarks option{width:410px;font-size: 15px; transform-origin: 10px 10px; transform: rotate(90deg); } </style> <div id="range"> <datalist id="tickmarks"> <option value="0" >0</option> <option value="10"></option> <option value="20">20</option> <option value="30"></option> <option value="40">40</option> <option value="50"></option> <option value="60">60</option> <option value="70"></option> <option value="80">80</option> <option value="90"></option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="showVal(this.value)"> <span id="volumeBox" >50</span> </div> <script> function showVal(newVal){ document.getElementById("volumeBox").innerHTML=newVal; } </script> </div>

00

<!DOCTYPE html> <style> #range { width:400px;border: 1px solid black;} #range input { width:99%;margin: 0 0 0 0;height:20px;} #tickmarks{ width:103%;margin: 0 0 0 0;display: flex;} #tickmarks option{width:410px;font-size: 15px;} </style> <div id="range"> <datalist id="tickmarks"> <option value="0" >0</option> <option value="10"></option> <option value="20">20</option> <option value="30"></option> <option value="40">40</option> <option value="50"></option> <option value="60">60</option> <option value="70"></option> <option value="80">80</option> <option value="90"></option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="showVal(this.value)"> <span id="volumeBox" >50</span> <div> <script> function showVal(newVal){ document.getElementById("volumeBox").innerHTML=newVal; } </script>

00

<!DOCTYPE html> <style> #range { width:400px;border: 1px solid black;} #range input {width:99%;-webkit-appearance: none; background: rgba(0%,0%,0%,0); margin: 0 0 0 0;display: flex;height:20px;} #tickmarks{ width:103%;margin: 0 0 0 0;display: flex;} #tickmarks option{width:410px;font-size: 15px;} input[type=range]:focus { outline: none;} /* --------------- Google Chrome ------------------ */ #range input::-webkit-slider-runnable-track { width: 100%; height: 3px; background: #fff; border: 1px solid #39404D; } #range input::-webkit-slider-thumb { border: 3px solid black; border-radius:50px 50px 0px 0px; background-color: coral; height:25px; width: 20px; cursor: pointer; -webkit-appearance: none;margin: -15px 0 0 0;} /* --------------- Firefox ------------------ */ #range input::-moz-range-track { width: 100%; height: 3px; background: #fff; border: 1px solid #39404D } #range input::-moz-range-thumb { border: 3px solid black; border-radius:50px 50px 0px 0px; background-color: coral; height:25px; width: 10px; cursor: pointer; -moz-appearance: none;} /* --------------- Microsoft Edge ------------------ */ input[type=range]::-ms-track { width: 100%; height: 3px; background: #fff; border: 1px solid #39404D;} #range input::-ms-thumb { border: 1px solid black; border-radius:50px 50px 0px 0px; background-color: coral; height:20px; width: 15px; cursor: pointer; margin: 1px 0 0 0; -webkit-appearance: none;} #range input::-ms-fill-lower { background: #fff;height:2px; border: 1px solid #39404D; border-radius: 2px; } #range input::-ms-fill-upper { background: #fff;height:2px; border: 1px solid #39404D; border-radius: 2px; } </style> <div id="range"> <datalist id="tickmarks"> <option value="0" >0</option> <option value="10"></option> <option value="20">20</option> <option value="30"></option> <option value="40">40</option> <option value="50"></option> <option value="60">60</option> <option value="70"></option> <option value="80">80</option> <option value="90"></option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="showVal(this.value)"> <span id="volumeBox" >50</span> <div> <script> function showVal(newVal){ document.getElementById("volumeBox").innerHTML=newVal; } </script>

00

<!DOCTYPE html> <style> #range { width:400px;border: 1px solid black;} #range input {width:99%;-webkit-appearance: none; background: rgba(0%,0%,0%,0); margin: 0 0 0 0;display: flex;height:20px;} #tickmarks{ width:103%;margin: 0 0 0 0;display: flex;} #tickmarks option{width:410px;font-size: 15px;} #range input:focus { outline: none;} /* --------------- Google Chrome ------------------ */ #range input::-webkit-slider-runnable-track { width: 100% ; height: 3px; background: #fff; border: 1px solid #39404D; } #range input::-webkit-slider-thumb { width: 0 ; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #232323; cursor: pointer; -webkit-appearance: none; margin: -15px 0 0 0;} /* --------------- Firefox ------------------ */ #range input::-moz-range-track { width: 0 ; height: 0; } #range input::-moz-range-thumb { width: 0 ; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #232323; cursor: pointer; -webkit-appearance: none ; margin: -15px 0 0 0;} /* --------------- Microsoft Edge ------------------ */ #range::-ms-track { width: 100% ; height: 3px; background: #fff ; border: 1px solid #39404D;} #range input::-ms-thumb { width: 0 ; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #232323; cursor: pointer; -webkit-appearance: none; margin: 7px 0 0 0;} #range input::-ms-fill-lower { background: #fff;height:2px; border: 1px solid #39404D; border-radius: 2px; } #range input::-ms-fill-upper { background: #fff;height:2px; border: 1px solid #39404D; border-radius: 2px; } </style> <div id="range"> <datalist id="tickmarks"> <option value="0" >0</option> <option value="10"></option> <option value="20">20</option> <option value="30"></option> <option value="40">40</option> <option value="50"></option> <option value="60">60</option> <option value="70"></option> <option value="80">80</option> <option value="90"></option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="showVal(this.value)"> <span id="volumeBox" >50</span> <div> <script> function showVal(newVal){ document.getElementById("volumeBox").innerHTML=newVal; } </script>

00

Edit

#html input range option label #html input range拖動實時觸發事件