slider

组件类型：UniSliderElement

滑动选择器

slider 兼容性

Android	iOS	web
3.9	4.11	4.0

属性

名称	类型	默认值	描述
name	string	-	表单的控件名称，作为键值对的一部分与表单(form组件)一同提交
disabled	boolean	-	是否禁用
min	number	0	slider 最小值
max	number	100	slider 最大值
step	number	1	slider 步长，取值必须大于 0，并且可被(max - min)整除
value	number	0	radio当前取值
activeColor	string(string.ColorString)	"#007aff"	slider 滑块左侧已选择部分的线条颜色
backgroundColor	string(string.ColorString)	"#e9e9e9"	radio背景条的颜色
block-size	number	28	radio滑块的大小，取值范围为 12 - 28
block-color	string(string.ColorString)	"#ffffff"	滑块颜色
show-value	boolean	false	是否显示当前 value
@change	(event: UniSliderChangeEvent) => void	-	完成一次拖动后触发的事件，event.detail = {value: value}
@changing	(event: UniSliderChangeEvent) => void	-	拖动过程中触发的事件，event.detail = {value: value}

事件

UniSliderChangeEvent

UniSliderChangeEvent 的属性值

名称	类型	必填	默认值	描述
detail	UniSliderChangeEventDetail	是	-	-
名称 类型 必备 默认值 描述 value number 是 - -
bubbles	boolean	是	-	是否冒泡
cancelable	boolean	是	-	是否可以取消
type	string	是	-	事件类型
target	UniElement | null	否	-	UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
currentTarget	UniElement | null	否	-	UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
timeStamp	number	是	-	事件发生时的时间戳

UniSliderChangeEvent 的方法

名称	类型	必填	默认值	描述
stopPropagation	() => void	是	-	阻止当前事件的进一步传播
preventDefault	() => void	是	-	阻止当前事件的默认行为

slider 属性兼容性

	Android	iOS	web
name	3.9	4.11	4.0
disabled	3.9	4.11	4.0
min	3.9	4.11	4.0
max	3.9	4.11	4.0
step	3.9	4.11	4.0
value	3.9	4.11	4.0
activeColor	3.9	4.11	4.0
backgroundColor	3.9	4.11	4.0
block-size	3.9	4.11	4.0
block-color	3.9	4.11	4.0
show-value	3.9	4.11	4.0
@change	3.9	4.11	4.0
@changing	3.9	4.11	4.0

tips

show-value属性设为true后，会在横条右侧显示一个数字。

但注意app-uvue中，value显示区的默认宽度是4位数字。超出宽度后，后面的数字无法显示。即最大9999。（其他平台不限制）

如您需要5位或更多数字，请将show-value设为false或不设，自行写一个text组件，绑定value的数值来显示。

• uni-app x 的 App 和 web 平台的样式效果和 W3C 的效果一致，球的左边距/右边距和轨道是对齐的，app-vue/web/小程序 平台会溢出球半径
• 在 uni-app x 的 App 和 web 平台高度为 block-size(28px) 大小 + 阴影(4px * 2)，默认 margin: 1px 0;，暂不支持设置 padding，实际占用高度为 38px
• 在 app-vue/web/小程序 平台高度为 18px, 默认 margin: 10px 18px;，实际占用高度为 38px
• 默认占用高度是一致的，调整样式后会出现差异

示例

hello uni-app x

Template

Script

<template>
  <view class="main">
    <slider :disabled="disabled_boolean" :min="min_input" :max="max_input" :step="step_input" :value="value_input"
      :activeColor="activeColor_input" :backgroundColor="backgroundColor_input" :block-size="block_size_input"
      :block-color="block_color_input" :show-value="show_value_boolean" @click="slider_click"
      @touchstart="slider_touchstart" @touchmove="slider_touchmove" @touchcancel="slider_touchcancel"
      @touchend="slider_touchend" @tap="slider_tap" @longpress="slider_longpress" @change="slider_change"
      @changing="slider_changing" style="width: 90%"><text>uni-app-x</text></slider>
  </view>

  <scroll-view style="flex: 1">
    <view class="content">
      <page-head title="组件属性"></page-head>
      <boolean-data :defaultValue="false" title="是否显示当前 value" @change="change_show_value_boolean"></boolean-data>
      <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
      <input-data defaultValue="0" title="最小值(min)" type="number" @confirm="confirm_min_input"></input-data>
      <input-data defaultValue="100" title="最大值(max)" type="number" @confirm="confirm_max_input"></input-data>
      <input-data defaultValue="1" title="步长(step)，取值必须大于 0，并且可被(max - min)整除" type="number"
        @confirm="confirm_step_input"></input-data>
      <input-data defaultValue="0" title="当前取值(value)" type="number" @confirm="confirm_value_input"></input-data>
      <input-data defaultValue="#007aff" title="滑块左侧已选择部分的线条颜色(active-color)" type="text"
        @confirm="confirm_activeColor_input"></input-data>
      <input-data defaultValue="#e9e9e9" title="背景条的颜色(background-color)" type="text"
        @confirm="confirm_backgroundColor_input"></input-data>
      <input-data defaultValue="28" title="滑块的大小(block-size)，取值范围为 12 - 28" type="number"
        @confirm="confirm_block_size_input"></input-data>
      <input-data defaultValue="#ffffff" title="滑块颜色(block-color)" type="text"
        @confirm="confirm_block_color_input"></input-data>
    </view>

    <view class="uni-padding-wrap">
      <page-head title="默认及使用"></page-head>
      <view class="uni-title">显示当前value</view>
      <view>
        <slider @change="sliderChange" :value="50" :show-value="true" />
      </view>

      <view class="uni-title">设置步进:step=10跳动</view>
      <view>
        <view class="uni-row">
          <text>0</text>
          <text class="m-l-a">100</text>
        </view>
        <slider @change="sliderChange" :value="60" :step="10" />
      </view>

      <view class="uni-title">浮点步进:step=0.01跳动</view>
      <view>
        <slider :value="0.5" :min="0" :max="1" :step="0.01" :show-value="true" />
      </view>

      <view class="uni-title">设置最小/最大值</view>
      <view>
        <slider @change="sliderChange" :value="100" :min="50" :max="200" :show-value="true" />
      </view>

      <view class="uni-title">不同颜色和大小的滑块</view>
      <view>
        <slider class="slider-custom-color-and-size" @change="sliderChange" :value="sliderValue"
          :backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
          :block-size="sliderBlockSize" />
      </view>
    </view>
  </scroll-view>
</template>

<style>
  .main {
    padding: 5px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-direction: row;
    justify-content: center;
  }

  .main .list-item {
    width: 100%;
    height: 100px;
    border: 1px solid #666;
  }

  .m-l-a {
    margin-left: auto;
  }
</style>

参见

• 参见uni-app相关文档
• 参见uni-app x相关文档
• 相关 Bug