Slider

基础用法

<pa-slider v-model="value" />

import { ref } from 'vue'

const value = ref(50)

双滑块

<pa-slider v-model="value" range />

import { ref } from 'vue'

const value = ref([20, 50])

指定范围

<pa-slider v-model="value" :min="-10" :max="10" />

import { ref } from 'vue'

const value = ref(-4)

设置步长

<pa-slider v-model="value" :step="5" />

import { ref } from 'vue'

const value = ref(20)

显示范围

<pa-slider v-model="value" show-range />

import { ref } from 'vue'

const value = ref(25)

禁用

<pa-slider v-model="value" disabled />

import { ref } from 'vue'

const value = ref(20)

自定义样式

<pa-slider v-model="value" active-color="red" inactive-color="#ccc" />

import { ref } from 'vue'

const value = ref(20)

自定义按钮

<pa-slider v-model="value">
  <template #button>
    <div class="slider-demo-button">{{ value }}</div>
  </template>
</pa-slider>

import { ref } from 'vue'

const value = ref(20)

刻度标记

<pa-slider v-model="value" :marks="marks" />
<pa-slider v-model="value2" :marks="marks" range class="block" style="margin-top: 60px" />

import { ref } from 'vue'

const value = ref(52)
const value2 = ref([29, 72])

const marks = {
  0: '0',
  20: '20',
  40: '40',
  60: '60',
  80: '80',
  100: '100',
}

Slider Props

参数	说明	类型	默认值
modelValue	当前进度百分比，在双滑块模式下为数组格式	SliderValue	单滑块时0，双滑块时[0, 100]
range	是否开启双滑块模式	boolean	false
min	最小值	number	0
max	最大值	number	100
step	步长	number	1
disabled	是否禁用滑块	boolean	false
showTag	是否显示当前进度标签	boolean	false
showRange	是否显示范围值	boolean	false
marks	是否显示刻度标记	Record<number,string>	false
formatter	格式化值	(value:number)=>number|string	-
activeColor	进度条颜色	string	-
inactiveColor	进度条非激活态颜色	string	-

Slider Event

事件名	参数
update:modelValue	(value: number | number[])
change	(value: number | number[])

Slider Slot

名称	说明
button	-

样式变量

名称	默认值
--pa-slider-background-color	#ebedf0
--pa-slider-active-background	var(--pa-color-primary)
--pa-slider-height	4px
--pa-slider-tip-font-color	var(--pa-color-black)
--pa-slider-tip-font-size	12px
--pa-slider-duration	0.2s
--pa-slider-button-width	24px
--pa-slider-button-height	24px
--pa-slider-button-background	#fff
--pa-slider-button-border	1px solid transparent
--pa-slider-button-radius	50%
--pa-slider-button-shadow	0 1px 2px rgba(0, 0, 0, 0.5
--pa-slider-button-tip-font-color	var(--pa-color-black)
--pa-slider-button-tip-font-size	12px
--pa-slider-button-tip-transform	translate3d(0, -100%, 0
--pa-slider-margin	0 15px
--pa-slider-disabled-opacity	0.5