youxi-app/pages/demo/form/slider.uvue

<template>
	<cl-page>
		<view class="p-3">
			<demo-item :label="t('基础用法')">
				<cl-slider v-model="num"></cl-slider>
			</demo-item>

			<demo-item :label="t('自定义')">
				<cl-slider
					v-model="num2"
					:disabled="isDisabled"
					:show-value="isShowValue"
					:block-size="isSize ? 26 : 20"
					:step="isStep ? 10 : 1"
					:max="isMax ? 50 : 100"
				></cl-slider>

				<cl-list
					border
					:pt="{
						className: 'mt-3'
					}"
				>
					<cl-list-item :label="t('显示值')">
						<cl-switch v-model="isShowValue"></cl-switch>
					</cl-list-item>

					<cl-list-item :label="t('步长10')">
						<cl-switch v-model="isStep"></cl-switch>
					</cl-list-item>

					<cl-list-item :label="t('滑块大点')">
						<cl-switch v-model="isSize"></cl-switch>
					</cl-list-item>

					<cl-list-item :label="t('最大50')">
						<cl-switch v-model="isMax"></cl-switch>
					</cl-list-item>

					<cl-list-item :label="t('禁用')">
						<cl-switch v-model="isDisabled"></cl-switch>
					</cl-list-item>
				</cl-list>
			</demo-item>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import DemoItem from "../components/item.uvue";
import { t } from "@/locale";

const num = ref(60);
const num2 = ref(35);
const isDisabled = ref(false);
const isShowValue = ref(true);
const isStep = ref(false);
const isSize = ref(false);
const isMax = ref(false);
</script>