✍ 📁 🙈 🙉 🙊 : input range option label

input range option label
改變 HTML5 range 樣式的兩種方法

range 原理 :
首先要來寫一個 range 出來，min 是最小值，max 是最大值，step 是每隔間距，value 是預設數值：
<input type="range" step="10" list="tickmarks" oninput="showVal(this.value)">

<!DOCTYPE html>
<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: 10px 0 0 0;height:55px;}

#volumeBox { width:410px;font-size: 15px;
             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>

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

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單