Slider 滑块

滑动输入器,用于在数值区间/自定义区间内进行选择。

基本用法

  1. <nut-slider
  2. v-model="val1"
  3. :range="[0,10]"
  4. >
  5. </nut-slider>

拖动时展示标签

  1. <nut-slider
  2. v-model="val2"
  3. :range="[0,100]"
  4. :showLabel="true"
  5. >
  6. </nut-slider>

一直展示标签

  1. <nut-slider
  2. v-model="val3"
  3. :range="[0,100]"
  4. :showLabel="true"
  5. :showLabelAlways="true"
  6. >
  7. </nut-slider>

两端显式可选取范围

  1. <nut-slider
  2. v-model="val4"
  3. :range="[-50,50]"
  4. :showLabel="true"
  5. :showRangeTxt="true"
  6. >
  7. </nut-slider>

设置分段数(stage=20)

  1. <nut-slider
  2. v-model="val5"
  3. :range="[0,100]"
  4. :showLabel="true"
  5. :showRangeTxt="true"
  6. :stage="5"
  7. >
  8. </nut-slider>

自定义class

  1. <nut-slider
  2. class="my-slider"
  3. v-model="val6"
  4. :range="[0,100]"
  5. >
  6. </nut-slider>

Prop

字段说明类型默认值
value滑块选定的值,可以使用 v-model 双向绑定数据。Number-
showLabel拖动时是否展示标签Booleanfalse
showLabelAlways是否一直展示标签Booleanfalse
showRangeTxt两端是否展示可选取范围Booleanfalse
stage分段数Number/String-

Event

名称说明回调参数
change滑动时触发函数value

Slider 滑块 - 图1