TnSlider 滑动条

Slider 滑动条一般用于选择一个范围的值

组件位置

nodeuni_modules

typescript

import TnSlider from '@tuniao/tnui-vue3-uniapp/components/slider/src/slider.vue'

import TnSlider from '@tuniao/tnui-vue3-uniapp/components/slider/src/slider.vue'

typescript

import TnSlider from '@/uni_modules/tuniaoui-vue3/components/slider/src/slider.vue'

import TnSlider from '@/uni_modules/tuniaoui-vue3/components/slider/src/slider.vue'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

通过v-model绑定滑动条的值，当传递的是一个整数时，表示当前滑动条的值，当传递的是一个数组时，表示当前滑动条的范围。
通过size设置滑动条大小，可选值为sm、lg
通过slider-bar-size设置滑块的尺寸大小，默认单位为 rpx，可以传递带单位的字符串
通过slider-height设置滑动条的高度，默认单位为 rpx，可以传递带单位的字符串
通过disabled设置滑动条是否禁用

vue

<script lang="ts" setup>
import { ref } from 'vue'

const sliderValue = ref<number>(0)
</script>

<template>
  <TnSlider v-model="sliderValue" />
  <TnSlider v-model="sliderValue" disabled />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const sliderValue = ref<number>(0)
</script>

<template>
  <TnSlider v-model="sliderValue" />
  <TnSlider v-model="sliderValue" disabled />
</template>

vue

<script lang="ts" setup>
import { ref } from 'vue'

const sliderValue = ref<number>(0)
</script>

<template>
  <TnSlider v-model="sliderValue" size="lg" />
  <TnSlider v-model="sliderValue" slider-bar-size="65" slider-height="50" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const sliderValue = ref<number>(0)
</script>

<template>
  <TnSlider v-model="sliderValue" size="lg" />
  <TnSlider v-model="sliderValue" slider-bar-size="65" slider-height="50" />
</template>

设置最大最小值和步进值

设置min和max的值可以设置滑动条的最小最大值

设置step可以设置滑动条的步进值，步进值表示滑动条每次滑动的最小单位

vue

<script lang="ts" setup>
import { ref } from 'vue'

const sliderValue = ref<number>(0)
</script>

<template>
  <TnSlider v-model="sliderValue" :min="20" :max="80" :step="5" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const sliderValue = ref<number>(0)
</script>

<template>
  <TnSlider v-model="sliderValue" :min="20" :max="80" :step="5" />
</template>

设置滑动条未激活和已激活时的颜色

通过active-color设置滑动条已激活时的颜色，支持rgb、rgba、hex，图鸟 UI 内置的颜色值

通过inactive-color设置滑动条未激活时的颜色，支持rgb、rgba、hex，图鸟 UI 内置的颜色值

vue

<script lang="ts" setup>
import { ref } from 'vue'

const sliderValue = ref<number>(0)
</script>

<template>
  <TnSlider
    v-model="sliderValue"
    active-color="tn-green"
    inactive-color="tn-red"
  />
  <TnSlider
    v-model="sliderValue"
    active-color="gradient__cool-5"
    inactive-color="gradient__cool-1"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const sliderValue = ref<number>(0)
</script>

<template>
  <TnSlider
    v-model="sliderValue"
    active-color="tn-green"
    inactive-color="tn-red"
  />
  <TnSlider
    v-model="sliderValue"
    active-color="gradient__cool-5"
    inactive-color="gradient__cool-1"
  />
</template>

API

Props

属性名	说明	类型	默认值	可选值
model-value/v-model	Slider 滑动条绑定的值	Number \| Number[]	-	-
size	Slider 滑动条尺寸	String	-	`sm` / `lg`
slider-bar-size	Slider 滑块尺寸大小	String \| Number	-	-
slider-height	Slider 滑动条的高度	String \| Number	-	-
active-color	Slider 滑动条激活时背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba	String	-	-
inactive-color	Slider 滑动条未激活时背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba	String	-	-
disabled	禁用 Slider 滑动条	Boolean	`false`	`true`
step	Slider 滑动条步进值	Number	1	-
min	Slider 滑动条最小值	Number	1	-
max	Slider 滑动条最大值	Number	100	-
validate-event	值发生修改时是否触发表单验证	Boolean	`true`	`false`

Events

事件名	说明	类型
change	slider 值发生变化时的回调函数，在拖动的情况下手指离开时才触发	`(value: number \| number[]) => void`
input	slider 值发生变化时回调，实时变化	`(value: number \|number[]) => void`

TnSlider 滑动条 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

设置最大最小值和步进值 ​

设置滑动条未激活和已激活时的颜色 ​

API ​

Props ​

Events ​