Range 滑块

import { Range } from 'feui';
components: {
  [Range.name]: Range
}

代码演示

基础用法

<fe-group>
  <fe-cell>
    <fe-range v-model='date1' on-change='onChange'></fe-range>
  </fe-cell>
</fe-group>

允许小数

<fe-cell title="允许小数" :inline-desc="'value is: '+data2" primary="content">
  <fe-range v-model="data2" decimal></fe-range>
</fe-cell>

最小/大值设置

<fe-cell title="设置最小/大值" :inline-desc="'value is: '+data6" primary="content">
  <fe-range v-model="data6" :min="7" :max="77"></fe-range>
</fe-cell>

设置步长

<fe-cell title="步长10" :inline-desc="'valus is: '+data7" primary="content">
  <fe-range v-model="data7" :step="10"></fe-range>
</fe-cell>

不可用

<fe-cell title="不可用" :inline-desc="'valus is: '+data8" primary="content">
  <fe-range v-model="data8" disabled></fe-range>
</fe-cell>

不可用 & 不可用透明度

<fe-group title="不可用">
  <fe-cell title="不可用" :inline-desc="'valus is: '+data8" primary="content">
    <fe-range v-model="data8" disabled></fe-range>
  </fe-cell>
  <fe-cell title="透明度" :inline-desc="'valus is: '+data8" primary="content">
    <fe-range v-model="data8" disabled :disabled-opacity="0.1"></fe-range>
  </fe-cell>
</fe-group>

不可用

<fe-cell title="线条高度" :inline-desc="'value is: '+data9" primary="content">
  <fe-range v-model="data9" :range-bar-height="4"></fe-range>
</fe-cell>

自定义html大小

<fe-cell title="文字大小" :inline-desc="'字号: ' + data10" primary="content">
  <fe-range v-model="data10" :min="12" :max="22" 
  minHTML="<span style='font-size:12px;'>小</span>" 
  maxHTML="<span style='font-size:22px;'>大</span>"></fe-range>
</fe-cell>

API

Events