FxSlider 滑块
拖动选择一个范围或数值。不依赖任何 UI 框架，基于 FxTooltip（按钮提示）+ FxInputNumber（show-input），完整支持拖拽、range、marks、断点、键盘、竖向。颜色走 @fx/styles token。
基础用法
vue
<template>
<div class="row">
<FxSlider v-model="value" class="slider" />
<span class="val">{{ value }}</span>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
const value = ref(30)
</script>
<style scoped>
.row {
display: flex;
align-items: center;
gap: 16px;
}
.slider {
flex: 1;
}
.val {
width: 40px;
color: var(--fx-text-color-primary);
font-size: 14px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
离散值
step 设置步进，show-stops 显示断点。
vue
<template>
<FxSlider v-model="value" :step="10" show-stops />
</template>
<script setup lang="ts">
import { ref } from "vue"
const value = ref(0)
</script>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
带输入框
show-input 在右侧显示 FxInputNumber，可直接输入。
vue
<template>
<FxSlider v-model="value" :show-input="true" />
</template>
<script setup lang="ts">
import { ref } from "vue"
const value = ref(40)
</script>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
尺寸
vue
<template>
<div class="col">
<FxSlider v-model="v1" size="large" />
<FxSlider v-model="v2" />
<FxSlider v-model="v3" size="small" />
</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
const v1 = ref(30)
const v2 = ref(30)
const v3 = ref(30)
</script>
<style scoped>
.col {
display: flex;
flex-direction: column;
gap: 20px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
气泡位置
placement 控制 tooltip 位置（默认 top）。
vue
<template>
<div class="col">
<span class="tip">placement 控制气泡位置：top / bottom</span>
<FxSlider v-model="v1" placement="top" />
<FxSlider v-model="v2" placement="bottom" />
</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
const v1 = ref(30)
const v2 = ref(30)
</script>
<style scoped>
.col {
display: flex;
flex-direction: column;
gap: 24px;
}
.tip {
color: var(--fx-text-color-secondary);
font-size: 13px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
范围选择
range 开启双滑块，v-model 绑定 [start, end]。
vue
<template>
<div class="row">
<FxSlider v-model="value" range class="slider" />
<span class="val">{{ value }}</span>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
const value = ref([20, 80])
</script>
<style scoped>
.row {
display: flex;
align-items: center;
gap: 16px;
}
.slider {
flex: 1;
}
.val {
width: 70px;
color: var(--fx-text-color-primary);
font-size: 14px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
竖向模式
vertical + height。
vue
<template>
<div class="box">
<FxSlider v-model="value" vertical height="200px" />
</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
const value = ref(30)
</script>
<style scoped>
.box {
height: 220px;
padding: 0 20px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
marks 标记
marks 自定义标记；step="mark" 时滑块吸附到 marks。
vue
<template>
<div class="col">
<FxSlider v-model="value" :marks="marks" />
<span class="tip">step="mark" 时滑块吸附到 marks</span>
<FxSlider v-model="value2" step="mark" :marks="marks" />
</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
const value = ref(30)
const value2 = ref(0)
const marks = {
0: "0°C",
30: { label: "30°C", style: { color: "var(--fx-color-primary)" } },
60: "60°C",
100: "100°C",
}
</script>
<style scoped>
.col {
display: flex;
flex-direction: column;
gap: 32px;
}
.tip {
color: var(--fx-text-color-secondary);
font-size: 13px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
限制取值
range + marks 组合，标记可选范围两端。
vue
<template>
<div class="row">
<FxSlider
v-model="value"
range
:marks="marks"
:min="0"
:max="100"
class="slider"
/>
<span class="val">{{ value }}</span>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
const value = ref([30, 60])
const marks = {
30: "起",
60: "止",
}
</script>
<style scoped>
.row {
display: flex;
align-items: center;
gap: 16px;
}
.slider {
flex: 1;
}
.val {
width: 70px;
color: var(--fx-text-color-primary);
font-size: 14px;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
API
Attributes
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model / modelValue | 绑定值（range 时为数组） | number | number[] | 0 |
| min | 最小值 | number | 0 |
| max | 最大值 | number | 100 |
| step | 步进，可为 'mark'（吸附 marks） | number | 'mark' | 1 |
| show-input | 是否显示计数器 | boolean | false |
| show-input-controls | 计数器是否显示按钮 | boolean | true |
| show-stops | 是否显示断点 | boolean | false |
| show-tooltip | 是否显示 tooltip | boolean | true |
| format-tooltip | tooltip 格式化 | (val: number) => string | number | — |
| disabled | 是否禁用 | boolean | false |
| range | 是否范围选择 | boolean | false |
| vertical | 竖向模式 | boolean | false |
| height | 竖向高度 | string | — |
| marks | 标记（键为 [min,max] 内的数值） | Record<number, string | {style, label}> | — |
| size | 尺寸 | 'large' | 'default' | 'small' | default |
| placement | tooltip 位置 | Placement | top |
| tooltip-class | tooltip 自定义类名 | string | — |
| persistent | tooltip 是否常驻 | boolean | true |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| update:modelValue | 值变化 | (val: number | number[]) => void |
| input | 拖动中变化 | (val: number | number[]) => void |
| change | 值确认变化 | (val: number | number[]) => void |
Exposes
| 方法 | 说明 |
|---|---|
| onSliderClick | 点击轨道（程序触发） |