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>

效果图：