Range

  • 常规:
  • 禁用:
  • 扩展:
<div class="yo-range"> <i class="yo-ico">&#xf027;</i> <input type="range" /> <i class="yo-ico">&#xf028;</i> </div>

假设你想要其他颜色,那么你可以这样扩展:

命名及颜色按照各自团队内部的FE/UI规范即可

全局扩展方式:

@include yo-range(test,#4a87ee);

使用方法:

<div class="yo-range yo-range-test"> <i class="yo-ico">&#xf027;</i> <input type="range" /> <i class="yo-ico">&#xf028;</i> </div>

局部扩展方式:

.xxx{ @include yo-range(test,#4a87ee); }

使用方法:

<div class="xxx"> <div class="yo-range yo-range-test"> <i class="yo-ico">&#xf027;</i> <input type="range" /> <i class="yo-ico">&#xf028;</i> </div> </div>
@include yo-range(
    $name:default, //{default | String} range名称
    $inner-bgcolor:default, //{default | Color} 定义range已选择区域滑条色
    $outer-bgcolor:default, //{default | Color} 定义range未选择区域滑条色
    $ball-color:default //{default | Color} 定义range滑块色
)