Range 区间选择器请使用手机扫码体验

基础用法

  1. html
    <nut-range
  2. :rangeValues.sync="val1"
  3. :range="[-93,322]"
  4. >
  5. </nut-range>

修改主题颜色

  1. html
    <nut-range
  2. color="#31ccec"
  3. :rangeValues.sync="val2"
  4. :range="[0,200]">
  5. </nut-range>

显示标签文字

  1. html
    <nut-range
  2. color="#31ccec"
  3. :rangeValues.sync="val2"
  4. :range="[0,200]"
  5. :showLabel="true"
  6. :showRangeTxt="true"
  7. >
  8. </nut-range>

Prop

字段说明类型默认值
rangeValues区间数据Array[0, 0]
color主题颜色String#ff0000
showLabel是否在选择区间时显示标签Booleanfalse
showLabelAlways是否一直显示着标签Booleanfalse
showRangeTxt是否显示区间值Booleanfalse
range最小最大区间范围Array[0, 10]
stage区间的步长Number, String1