✍ 📁 🙈 🙉 🙊 : 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拖動實時觸發事件