Slider 滑块请使用手机扫码体验

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

基本用法

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

拖动时展示标签

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

一直展示标签

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

两端显式可选取范围

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

设置分段数（stage=20）

  1. html
    <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. html
    <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-