Range

  • 常规:
  • 禁用:
  • 扩展:
<div class="yo-range"> <input type="range" /> </div>

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

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

全局扩展方式:

@include yo-range( $name: test, $inner-bgcolor: #4a87ee );

使用方法:

<div class="yo-range yo-range-test"> <input type="range" /> </div>

局部扩展方式:

.xxx { @include yo-range( $name: test, $inner-bgcolor: #4a87ee ); }

使用方法:

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