Slider 滑块

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="skeleton骨架屏">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" align="center" />
			<zk-slider v-model="value1" :show-value="true" @change="onChange" />
		</zk-theme>

		<!-- 自定义样式 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义样式" align="center" />
			<zk-slider 
				v-model="value2" 
				active-color="#FF5722" 
				background-color="#E5E6EB" 
				:block-size="40"
				block-color="#FF5722" 
				:show-value="true" 
			/>
		</zk-theme>

		<!-- 小型滑块 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="小型滑块" align="center" />
			<zk-slider v-model="value3" :block-size="20" :show-value="true" />
		</zk-theme>

		<!-- 设置步长 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="设置步长" align="center" />
			<zk-slider v-model="value4" :step="10" :show-value="true" />
		</zk-theme>

		<!-- 设置范围 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="设置范围" align="center" />
			<zk-slider v-model="value5" :min="-50" :max="50" :show-value="true" />
		</zk-theme>

		<!-- 禁用状态 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="禁用状态" align="center" />
			<zk-slider v-model="value6" disabled :show-value="true" />
		</zk-theme>

		<!-- 实时数值变化 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="实时数值变化" align="center" />
			<zk-slider v-model="value7" :show-value="true" @changing="onChanging" />
			<view class="demo-value">
				<zk-text type="primary" :size="26" :text="`当前值：${value7}`" margin="16rpx 0 0 0" />
			</view>
		</zk-theme>
	</zk-theme>
</template>

<script>
export default {
	data() {
		return {
			value1: 50,
			value2: 30,
			value3: 40,
			value4: 50,
			value5: 0,
			value6: 60,
			value7: 25
		}
	},
	methods: {
		onChange(value) {
			console.log('change事件触发：', value)
		},
		onChanging(value) {
			console.log('changing事件触发：', value)
		}
	}
}
</script>

<style lang="scss">
/* #ifdef APP-NVUE */
.demo-value {
	flex-direction: row;
}
/* #endif */
</style>