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区间的步长Number1

Range 区间选择器 - 图1