ionic的range修改

最近須要一個個性化的range(滑塊)。ionic庫中的range已經自帶了一些簡單的樣式。根據ionic本身的css修改，彷佛方便了許多。

ionic自帶的range分析（不想深究的這一段能夠不看）

官方文檔給的range例子以下：

<div class="range range-positive">
    <i class="icon ion-ios7-sunny-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-ios7-sunny"></i>
  </div>

運行後以下：

打開ionic.min.css，搜range，我天，好多行。
一個個看吧。
.range

.range {
  /*display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;*/
  display: flex;
  -webkit-box-align: center;
  /*-ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;*/
  align-items: center;
  padding: 2px 11px; }

我把這個樣式單獨提出來，就像這樣：

<div class="range calm-bg">
       test
  </div>

而後將沒有用到的樣式註釋掉，就像上面同樣。一行行開始看吧！

display: flex;//彈性子元素的父元素。經過設置display 屬性的值爲flex 或 inline-flex將其定義爲彈性容器。
-webkit-box-align: center;//設置彈性盒模型對象的子元素居中對齊
align-items: center;//彈性子元素如何在當前線上沿着側軸排列。

這是在使用flexbox的居中佈局，css3的。
參考文獻http://zh.learnlayout.com/flexbox.html
和http://www.mamicode.com/info-detail-229179.html
以及https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
綜上，range只是把最外層的div設置爲了彈性容器，而且子元素上下居中。
注意：此時不管盒子內有多少個div，它們始終在同一行！
.range input

[1]: /img/bVsp8L
  [2]: /img/bVcb4K
.range input {
  /*display: inline-block;*/
  overflow: hidden;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-right: 2px;
  padding-left: 1px;
  width: auto;
  height: 43px;
  outline: none;
  /*background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ccc), color-stop(100%, #ccc));*/
  background: linear-gradient(to right, #ccc 0%, #ccc 100%);
  background-position: center;
  background-size: 99% 2px;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  /*
   &::-ms-track{
     background: transparent;
     border-color: transparent;
     border-width: 11px 0 16px;
     color:transparent;
     margin-top:20px;
   }
   &::-ms-thumb {
     width: $range-slider-width;
     height: $range-slider-height;
     border-radius: $range-slider-border-radius;
     background-color: $toggle-handle-off-bg-color;
     border-color:$toggle-handle-off-bg-color;
     box-shadow: $range-slider-box-shadow;
     margin-left:1px;
     margin-right:1px;
     outline:none;
   }
   &::-ms-fill-upper {
     height: $range-track-height;
     background:$range-default-track-bg;
   }
   */ }
   
   
 .range input {
  -webkit-box-flex: 1;
  /*-webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;*/
  flex: 1;
  display: block;
  margin-right: 10px;
  margin-left: 10px; }

真是很是的長。首先放一個測試程序。

<div class="range calm-bg">
       <input type="text"></input>
  </div>

發現這個測試程序中間有一個 橫線！
橫線緣由：

.range input {
      background: linear-gradient(to right, #ccc 0%, #ccc 100%);//CSS3 線性漸變（linear-gradient），都設置爲灰色
      background-position: center;
      background-size: 99% 2px;//background-size css3的屬性，寬99%,高2px
      background-repeat: no-repeat;
      }

因此，要改變range右側的條背景顏色，就改上面就行了。
線性漸變參考文章：http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html
測試程序改成：

<div class="range calm-bg">
       <input type="range">
</div>

.range input {
-webkit-appearance:none;//chrome的CSS3 appearance 屬性，先清除原有的樣式。
}

接下來設置滑塊樣式，用Webkit內核的瀏覽器的屬性-webkit-slider-thumb，滑塊樣式。
Webkit核心，如Chrome瀏覽器下，使用的僞元素爲::-webkit-slider-runnable-track和::-webkit-slider-thumb. 前者指的是「跑動軌跡」，也就是那個條條元素；後者指用來拖的哪塊突出的小疙瘩。
參考文獻http://www.zhangxinxu.com/wordpress/2013/06/%E4%BC%AA%E5%85%83%E7%B4%A0-%E8%A1%A8%E5%8D%95%E6%A0%B7%E5%BC%8F-pseudo-elements-style-form-controls/
因此，設置滑塊就要用：

.range.myrange input[type="range"]::-webkit-slider-thumb{//range button's style 
  background:#233746;
}

滑塊前的背景：

.range.range-darkgray.myrange input::-webkit-slider-thumb:before {
    /* what creates the colorful line on the left side of the slider */
    top: 10px;
    height: 7px;
    background: #4e6272;
}

結論

css：

.range.myrange input[type="range"]::-webkit-slider-thumb{//range button's style 
  background:#233746;
}
.range.range-darkgray.myrange input::-webkit-slider-thumb:before {
    /* what creates the colorful line on the left side of the slider */
    top: 10px;
    height: 7px;
    background: #4e6272;
}
.range.myrange input {
  background: linear-gradient(to right, #9bafbe 0%, #9bafbe 100%);
  background-position: center;
  background-size: 99% 7px;
  background-repeat: no-repeat;
}

html:

<div class="range range-darkgray myrange">
    <input type="range" min="0" max="1000" name="volume">
</div>

效果圖：