✍ 📁 🙈 🙉 🙊 : 標簽 <input> range

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

<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>

<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>

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

<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>

<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>

<!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>

<!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>

Edit

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

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

input range

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

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

input range

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

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

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