@wines/slider NPM

`@wines/slider`

Slider 滑动选择器

用于在一个区间内选择特定值。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "Slider",
  "usingComponents": {
    "wux-icon": "@wines/icon",
    "wux-slider": "@wines/slider"
  }
}

示例

该组件内部会依据传入的 defaultValue 或 value 参数的长度，设置对应个数的滑块，默认只显示一个滑块。

<view class="page">
	<view class="page__hd">
		<view class="page__title">Slider</view>
		<view class="page__desc">滑动选择器</view>
	</view>
	<view class="page__bd page__bd_spacing">
		<view class="sub-title">Default</view>
		<wux-slider defaultValue="{{ [10] }}" />
		<view class="sub-title">Custom tip</view>
		<wux-slider defaultValue="{{ [10] }}" tipFormatter="{d} %" />
		<view class="sub-title">No tip</view>
		<wux-slider defaultValue="{{ [10] }}" tipFormatter="" />
		<view class="sub-title">Disabled</view>
		<wux-slider defaultValue="{{ [10] }}" disabled />
		<view class="sub-title">Show value</view>
		<wux-slider defaultValue="{{ [10] }}" showValue />
		<view class="sub-title">Use icons</view>
		<wux-slider defaultValue="{{ [10] }}">
			<wux-icon wux-class="min" type="ios-volume-mute" slot="min" />
			<wux-icon wux-class="max" type="ios-volume-high" slot="max" />
		</wux-slider>
		<view class="sub-title">Step = 10</view>
		<wux-slider defaultValue="{{ [10] }}" showValue step="10" />
		<view class="sub-title">Show mark</view>
		<wux-slider
		 defaultValue="{{ [100] }}"
		 showMark
		 step="25"
		 markStyle="background-color: red"
		/>
		<wux-slider
		 defaultValue="{{ [100] }}"
		 showMark
		 step="25"
		 markStyle="{{ ['background-color: red', 'background-color: yellow', 'background-color: blue'] }}"
		/>
		<view class="sub-title">Min and max</view>
		<wux-slider
		 defaultValue="{{ [12] }}"
		 showValue
		 step="11"
		 min="0"
		 max="88"
		/>
		<view class="sub-title">Controlled</view>
		<wux-slider
		 value="{{ value }}"
		 controlled
		 bind:change="onChange"
		 bind:afterChange="afterChange"
		/>
		<view class="sub-title">Custom style</view>
		<wux-slider
		 defaultValue="{{ [10] }}"
		 railStyle="background-color: blue"
		 trackStyle="background-color: red"
		 handleStyle="background-color: yellow"
		/>
		<wux-slider
		 defaultValue="{{ [10, 30, 50] }}"
		 railStyle="background-color: blue"
		 trackStyle="{{ ['background-color: red', 'background-color: yellow'] }}"
		 handleStyle="{{ ['background-color: yellow', 'background-color: red', 'background-color: blue'] }}"
		/>
		<view class="sub-title">Range = 2</view>
		<wux-slider defaultValue="{{ [10, 30] }}" />
		<view class="sub-title">Range = 3</view>
		<wux-slider defaultValue="{{ [10, 30, 50] }}" />
	</view>
</view>

import './index.less';
Page({
  data: {
    value: [0],
  },
  onChange(e) {
    console.log('onChange', e.detail.value);
    this.setData({ value: e.detail.value });
  },
  afterChange(e) {
    console.log('afterChange', e.detail.value);
    this.setData({ value: e.detail.value });
  },
});

Slider 滑动选择器

用于在一个区间内选择特定值。

使用指南

在 page.json 中引入组件

{
    "navigationBarTitleText": "Slider",
    "usingComponents": {
        "wux-icon": "../../dist/icon/index",
        "wux-slider": "../../dist/slider/index"
    }
}

示例

!> 该组件内部会依据传入的 defaultValue 或 value 参数的长度，设置对应个数的滑块，默认只显示一个滑块。

<view class="page">
    <view class="page__hd">
        <view class="page__title">Slider</view>
        <view class="page__desc">滑动选择器</view>
    </view>
    <view class="page__bd page__bd_spacing">
        <view class="sub-title">Default</view>
        <wux-slider defaultValue="{{ [10] }}" />
        <view class="sub-title">Custom tip</view>
        <wux-slider defaultValue="{{ [10] }}" tipFormatter="{d} %" />
        <view class="sub-title">No tip</view>
        <wux-slider defaultValue="{{ [10] }}" tipFormatter="" />
        <view class="sub-title">Disabled</view>
        <wux-slider defaultValue="{{ [10] }}" disabled />
        <view class="sub-title">Show value</view>
        <wux-slider defaultValue="{{ [10] }}" showValue />
        <view class="sub-title">Use icons</view>
        <wux-slider defaultValue="{{ [10] }}">
            <wux-icon wux-class="min" type="ios-volume-mute" slot="min" />
            <wux-icon wux-class="max" type="ios-volume-high" slot="max" />
        </wux-slider>
        <view class="sub-title">Step = 10</view>
        <wux-slider defaultValue="{{ [10] }}" showValue step="10" />
        <view class="sub-title">Show mark</view>
        <wux-slider defaultValue="{{ [100] }}" showMark step="25" markStyle="background-color: red" />
        <wux-slider defaultValue="{{ [100] }}" showMark step="25" markStyle="{{ ['background-color: red', 'background-color: yellow', 'background-color: blue'] }}" />
        <view class="sub-title">Min and max</view>
        <wux-slider defaultValue="{{ [12] }}" showValue step="11" min="0" max="88" />
        <view class="sub-title">Controlled</view>
        <wux-slider value="{{ value }}" controlled bind:change="onChange" bind:afterChange="afterChange" />
        <view class="sub-title">Custom style</view>
        <wux-slider defaultValue="{{ [10] }}" railStyle="background-color: blue" trackStyle="background-color: red" handleStyle="background-color: yellow" />
        <wux-slider defaultValue="{{ [10, 30, 50] }}" railStyle="background-color: blue" trackStyle="{{ ['background-color: red', 'background-color: yellow'] }}" handleStyle="{{ ['background-color: yellow', 'background-color: red', 'background-color: blue'] }}" />
        <view class="sub-title">Range = 2</view>
        <wux-slider defaultValue="{{ [10, 30] }}" />
        <view class="sub-title">Range = 3</view>
        <wux-slider defaultValue="{{ [10, 30, 50] }}" />
    </view>
</view>

Page({
	data: {
		value: [0],
	},
	onChange(e) {
		console.log('onChange', e.detail.value)
		this.setData({ value: e.detail.value })
	},
	afterChange(e) {
		console.log('afterChange', e.detail.value)
		this.setData({ value: e.detail.value })
	},
})

视频演示

Slider

API

Slider props

参数	类型	描述	默认值
prefixCls	`string`	自定义类名前缀	wux-slider
min	`number`	最小值	0
max	`number`	最大值	100
step	`number`	步长，取值必须大于 0，并且可被 (max - min) 整除	1
defaultValue	`array`	默认值，当 `controlled` 为 `false` 时才生效	0
value	`array`	当前值，当 `controlled` 为 `true` 时才生效	0
controlled	`boolean`	是否受控说明文档	false
disabled	`boolean`	是否禁用	false
showMark	`boolean`	是否显示间断点，建议在 step 间隔不密集时使用	false
showValue	`boolean,object`	是否显示最小、大值，参数支持对象格式如 `{ min: false, max: true }`	false
tipFormatter	`string`	格式化当前滑块的值并显示 tip，当其为空时隐藏 tip。（`{d}` 为固定写法会被转化为当前滑块的值，如 `{d} %` 转化为 `n %`）	`{d}`
markStyle	`string,object,array`	间断点的样式，参数支持数组格式如 `[ 'background-color: red' ]`	-
handleStyle	`string,object,array`	滑块的样式，参数支持数组格式如 `[ 'background-color: red' ]`	-
trackStyle	`string,object,array`	选中部分滑动条的样式，参数支持数组格式如 `[ 'background-color: red' ]`	-
railStyle	`string,object`	未选中部分的样式	-
wrapStyle	`string,object`	自定义 wrap 样式	-
bind:change	`function`	拖动过程中触发的回调函数 `event.detail = { value: value, offsets: offsets }`	-
bind:afterChange	`function`	完成一次拖动后触发的回调函数 `event.detail = { value: value, offsets: offsets }`	-