代码演示
如何引入
jsx
import { Slider } from '@kousum/semi-ui-vue';基本用法
基本滑动条。当 range 为 true 时，支持两侧滑动。当 disabled 为 true 时，滑块处于不可用状态。
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
22
1
import { Slider } from '@kousum/semi-ui-vue';2
3
export default () => (4
<div>5
<div>6
<div>Default</div>7
<Slider showBoundary={true}></Slider>8
</div>9
<br/>10
<br/>11
<div>12
<div>Range</div>13
<Slider defaultValue={[20, 60]} range></Slider>14
</div>15
<br/>16
<br/>17
<div>18
<div>Disabled</div>19
<Slider defaultValue={40} disabled></Slider>20
</div>21
</div>22
);Show Error
Auto Save
带输入框的
滑动条的滑块和输入框组件保持同步。
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
30
1
import { Slider, InputNumber } from '@kousum/semi-ui-vue';2
import { reactive, defineComponent } from 'vue';3
4
const Comp = defineComponent(() => {5
6
const state = reactive({ value: 10 });7
8
function getSliderValue(value) {9
if (isNaN(Number(value))) {10
return;11
}12
state.value = value / 113
}14
15
return () => {16
17
const { value } = state;18
return (19
<div>20
<div style={{ width: '320px', marginRight: '15px' }}>21
<Slider step={1} value={value} onChange={(value) => (getSliderValue(value))}></Slider>22
</div>23
<InputNumber onChange={(v) => getSliderValue(v)} style={{ width: '100px' }} value={value} min={0}24
max={100} />25
</div>26
);27
}28
})29
30
export default CompShow Error
Auto Save
自定义提示
使用 tipFormatter 可以设置 Tooltip 的显示的格式。设置 tipFormatter={null}，则隐藏 Tooltip。getAriaValueText用于给滑块的当前值提供一个用户友好的名称，对屏幕阅读器用户很重要。
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
10
1
import { Slider } from '@kousum/semi-ui-vue';2
3
export default () => (4
<div>5
<Slider tipFormatter={v => (`${v}%`)} getAriaValueText={v => (`${v}%`)}/>6
<br/>7
<br/>8
<Slider tipFormatter={null} />9
</div>10
);Show Error
Auto Save
带标签的
使用 marks 属性标注滑块的刻度，使用 value / defaultValue 指定滑块位置。
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
20
1
import { Slider } from '@kousum/semi-ui-vue';2
3
export default () => (4
<div>5
<div>step=10</div>6
<Slider step={10} marks={{ 0: '0', 10: '10', 20: '20', 30: '30', 40: '40', 50: '50', 100: '100' }} defaultValue={[10, 100]} range={true}></Slider>7
<br/>8
<br/>9
<div>step=0.1</div>10
<Slider step={0.1} marks={{ 0.1: '0.1', 0.2: '0.2', 0.3: '0.3', 0.4: '0.4', 0.5: '0.5' }} min={0} max={1} defaultValue={[0.1, 0.5]} range={true}></Slider>11
<br/>12
<br/>13
<div>Marks</div>14
<Slider marks={{ 20: '20°C', 40: '40°C' }} defaultValue={[0, 100]} tipFormatter={v => (`${v}°C`)} range={true} getAriaValueText={(value) => `${value}°C`}></Slider>15
<br/>16
<br/>17
<div>Included</div>18
<Slider marks={{ 20: '20°C', 40: '40°C' }} included={false} defaultValue={[0, 100]} range={true} tipFormatter={v => (`${v}°C`)} getAriaValueText={(value) => `${value}°C`}></Slider>19
</div>20
);Show Error
Auto Save
分段背景
通过使用 linear-gradient 及 railStyle ，配合 onChange 可以实现动态的分段背景效果。
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
40
1
import { Slider } from '@kousum/semi-ui-vue'; 2
import { defineComponent } from 'vue'; 3
import { reactive } from 'vue';4
5
const Comp = defineComponent(()=>{6
const state = reactive({ value: [20, 60] });7
function changeValue(value) {8
state.value = value9
}10
11
function getRailStyle(range) {12
// color of second segment inherits from .semi-slider-track13
const color = ['var(--semi-color-danger)', 'transparent', 'var(--semi-color-success)'];14
const gradientPos = state.value.map(val =>15
((val - range[0]) / (range[1] - range[0])).toFixed(2) * 10016
);17
const style = {18
background: `linear-gradient(to right, ${color[0]} ${gradientPos[0]}%, ${color[1]} ${gradientPos[0]}%, ${color[1]} ${gradientPos[1]}%, ${color[2]} ${gradientPos[1]}%)`19
};20
return style;21
}22
23
return ()=>{24
25
const range = [10, 100];26
const railStyle = getRailStyle(range);27
return (28
<Slider29
range30
min={range[0]}31
max={range[1]}32
onChange={changeValue}33
railStyle={railStyle}34
defaultValue={state.value}35
/>36
);Show Error
Auto Save
受控组件
滑块位置即 Slider 的值由 value 控制，配合 onChange 使用。
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
24
1
import { Slider, Button } from '@kousum/semi-ui-vue'; 2
import { defineComponent } from 'vue'; 3
import { reactive } from 'vue';4
5
const Comp = defineComponent(()=>{6
7
const state = reactive({ value: 10 });8
function changeValue() {9
state.value = state.value + 1010
}11
12
return ()=>{13
return (14
<div>15
<Button onClick={changeValue} style={{ marginRight: '20px' }}>点击改变value值</Button>16
<br/>17
<br/>18
<Slider value={state.value}></Slider>19
</div>20
);21
}22
})23
24
export default CompShow Error
Auto Save
垂直
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
24
1
import { Slider } from '@kousum/semi-ui-vue';2
3
export default () => (4
<div>5
<div style={{ height: '300px', marginLeft: '30px', marginTop: '10px', paddingRight: '30px', display: 'inline-block' }}>6
<Slider vertical></Slider>7
</div>8
<div style={{ height: '300px', marginLeft: '30px', marginTop: '10px', paddingRight: '30px', display: 'inline-block' }}>9
<Slider vertical verticalReverse></Slider>10
</div>11
<div style={{ height: '300px', marginLeft: '30px', marginTop: '10px', paddingRight: '30px', display: 'inline-block' }}>12
<Slider vertical range defaultValue={[20, 60]}></Slider>13
</div>14
<div style={{ height: '300px', marginLeft: '30px', marginTop: '10px', paddingRight: '30px', display: 'inline-block' }}>15
<Slider vertical verticalReverse range defaultValue={[20, 60]}></Slider>16
</div>17
<div style={{ height: '300px', marginLeft: '30px', marginTop: '10px', paddingRight: '30px', display: 'inline-block' }}>18
<Slider vertical range marks={{ 20: '20°C', 40: '40°C' }} step={10} defaultValue={[20, 60]}></Slider>19
</div>20
<div style={{ height: '300px', marginLeft: '30px', marginTop: '10px', paddingRight: '30px', display: 'inline-block' }}>21
<Slider vertical verticalReverse range marks={{ 20: '20°C', 40: '40°C' }} step={10} defaultValue={[20, 60]}></Slider>22
</div>23
</div>24
);Show Error
Auto Save
滑块带圆点
0px x 0px
demoApp.vue
demo.tsx
tsconfig.json
Import Map
xxxxxxxxxx11
7
13
1
import { Slider } from '@kousum/semi-ui-vue';2
export default ()=><div>3
<div>4
<div>Default</div>5
<Slider showBoundary={true} handleDot={{size:'4px',color:'blue'}}></Slider>6
</div>7
<br/>8
<br/>9
<div>10
<div>Range</div>11
<Slider defaultValue={[20, 60]} range handleDot={[{size:'4px',color:'blue'},{size:'4px',color:'pink'}]}></Slider>12
</div>13
</div>Show Error
Auto Save
API参考
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| aria-label | aria-label属性，用来给当前元素加上的标签描述, 提升可访问性 | string | - | - |
| aria-labelledby | aria-labelledby属性，表明某些元素的 id 是某一对象的标签。它被用来确定控件或控件组与它们标签之间的联系, 提升可访问性 | string | - | - |
| aria-valuetext | aria-valuetext属性，为滑块的当前值提供用户友好的名称。 | string | - | - |
| defaultValue | 设置初始取值 | number | number[] | 0 | - |
| disabled | 滑块是否禁用 | boolean | false | - |
| handleDot | 滑块是否带有圆点 | { color: string, size: string} | { color: string, size: string}[] | - | 2.52.0 |
| included | marks 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true | - |
| marks | 刻度，key 的类型必须为 number 且取值在闭区间 [min, max] 内 | Record<number, string > | 无 | - |
| max | 最大值 | number | 100 | - |
| min | 最小值 | number | 0 | - |
| railStyle | 滑块轨道的样式 | CSSProperties | - | 0.31.0 |
| range | 是否支持两边同时可滑动 | boolean | false | - |
| showArrow | tooltip 是否带箭头 | boolean | true | 2.48.0 |
| showBoundary | 是否在 hover 时展示最大值最小值 | boolean | false | - |
| showMarkLabel | 是否隐藏标签 | boolean | true | 2.48.0 |
| step | 步长 | number | 1 | - |
| tipFormatter | 设置Tooltip的展示格式，默认显示当前选值 | (value: string | number | boolean | (string | number | boolean)[]) => any | v => v | - |
| tooltipOnMark | 滑轨上的 mark 是否带有 tooltip | false | 2.48.0 | |
| tooltipVisible | 是否始终显示Tooltip | boolean | 无 | - |
| value | 设置当前取值 | number | number[] | - | |
| vertical | 是否设置方向为垂直 | boolean | false | - |
| verticalReverse | 反转垂直方向，即上大下小 >=1.29.0 | boolean | false | - |
| onAfterChange | 值变化后触发，把当前值作为参数传入 | (value: number | number[]) => void | 无 | - |
| onChange | 当 Slider 的值发生改变时的回调 | (value: number | number[]) => void | 无 | - |
| onMouseUp | 鼠标松开滑块时触发 | (e: React.MouseEvent<HTMLDivElement>) => void | 无 | 2.41.0 |
| getAriaValueText | 用于给滑块的当前值提供一个用户友好的名称，对屏幕阅读器用户很重要，参数value为当前滑块的值，index为当前滑块的顺序 | (value: number, index?: number) => string | - | - |
Accessibility
ARIA
- Slider 可聚焦的控制元素 role 为
slider。 - 元素的
aria-valuenow属性为当前值的十进制数值。 - 元素的
aria-valuemin属性为最小允许值的十进制数值。 - 元素的
aria-valuemax属性为最大允许值的十进制数值。 - 当 Slider 为纵向时，元素的
aria-orientation属性为 'vertical'。 - 当
aria-valuenow的值不容易被理解时，支持通过 APIaria-valuetext传递一个字符串使其更友好。也可以通过 APIgetAriaValueText(value, index)方法得到aria-valuetext的值。 - 支持通过 API
aria-label或者aria-labelledby确定 slider 的标签。
键盘和焦点
- Slider 的滑块可被获取到焦点，并展示当前滑块的提示信息，且这些信息需要被辅助技术读取到。
- 当用户使用
range属性时，可以使用Tab及Shift+Tab切换左右两个滑块的焦点。 - 键盘用户可以通过
上箭头或右箭头来增加滑块值，下箭头或左箭头来减少滑块值。 - 若想要滑块高于步长的变化量时， slider支持 10*step 的变化量：
- Windows 用户：
Page Up用于增加，Page Down用于减少； - Mac 用户使用：
Fn+上箭头用于增加，Fn+下箭头用于按键； - 当用户使用
range属性时，前一个滑块的Page Up(Fn+上箭头) 键仅支持到与后一个滑块相遇，重合后再对前一个滑块使用 Page Up 键则无响应。后一个滑块同理，相遇后，对Page Down(Fn+下箭头) 键无响应。
- Windows 用户：
- 若想将滑块移动到滑杆的最小值处：
- Windows 用户：
Home； - Mac 用户：
Fn+左箭头； - 当用户使用
range属性时，后一个滑块的Home(Fn+左箭头) 键仅支持到与前一个滑块相遇，重合后再次使用Home(Fn+左箭头) 键无响应。
- Windows 用户：
- 若想将滑块移动到滑杆的最大值处：
- Windows 用户：
End； - Mac 用户：
Fn+右箭头； - 当用户使用
range属性时，前一个滑块的End(Fn+右箭头) 键仅支持到与后一个滑块相遇，重合后再次使用End(Fn+右箭头) 键无响应。
- Windows 用户：
设计变量
color
spacing
radius
height
width
font
animation
other
| 变量 | 默认值 | 用法 |
|---|---|---|
| $color-slider-text-default | var(--semi-color-text-0) | 滑动条文本颜色 - 默认 |
| $color-slider_disabled-text-default | var(--semi-color-disabled-text) | 滑动条禁用文本颜色 - 默认 |
| $color-slider_dot-bg-default | var(--semi-color-white) | 滑动条圆形刻度点颜色 - 默认态 |
| $color-slider_dot-border-active | var(--semi-color-white) | 滑动条圆形刻度点描边颜色 - 按下态 |
| $color-slider_dot-border | var(--semi-color-white) | 滑动条圆形刻度点描边颜色 - 默认态 |
| $color-slider_handle-bg-default | var(--semi-color-white) | 滑动条圆形按钮颜色 - 默认态 |
| $color-slider_handle-bg-hover | var(--semi-color-white) | 滑动条圆形按钮颜色 - 悬停态 |
| $color-slider_handle-border-focus | var(--semi-color-focus-border) | 滑动条圆形描边颜色 - 激活态 |
| $color-slider_handle_disabled-border-hover | var(--semi-color-white) | 禁用滑动条圆形描边颜色 - 悬停态 |
| $color-slider_handle_disabled-border | var(--semi-color-border) | 禁用滑动条圆形描边颜色 - 默认态 |
显示第 1 条-第 10 条，共 17 条
- 1
- 2
| 变量 | 默认值 | 用法 |
|---|---|---|
| $spacing-slider-paddingX | 13px | 滑动条整体水平内边距 |
| $spacing-slider-paddingY | 0px | 滑动条整体垂直内边距 |
| $spacing-slider-margin | 0px | 滑动条整体外边距 |
| $spacing-slider_rail-margin | 0px | 滑动条轨道外边距 |
| $spacing-slider_rail-padding | 0px | 滑动条轨道内边距 |
| $spacing-slider_rail-top | 14px | 滑动条未填充轨道顶部距离 |
| $spacing-slider_handle-marginTop | 4px | 滑动条圆形按钮顶部外边距 |
| $spacing-slider_track-top | 14px | 滑动条已填充轨道顶部距离 |
| $spacing-slider_tooltip-top | -40px | 滑动条工具提示顶部距离 |
| $spacing-slider_dot-top | 14px | 滑动条圆形刻度点顶部距离 |
显示第 1 条-第 10 条，共 25 条
- 1
- 2
- 3
| 变量 | 默认值 | 用法 |
|---|---|---|
| $radius-slider_rail | var(--semi-border-radius-small) | 滚动条未填充轨道圆角 |
| $radius-slider_track | var(--semi-border-radius-small) | 滚动条已填充轨道圆角 |
显示第 1 条-第 2 条，共 2 条
- 1
| 变量 | 默认值 | 用法 |
|---|---|---|
| $height-slider_wrapper | 32px | 滚动条容器整体高度 |
| $height-slider_vertical_wrapper | 4px | 垂直滚动条整体宽度 |
| $height-slider_rail | 4px | 滚动条未填充轨道高度 |
| $height-slider_track | 4px | 滚动条已填充轨道高度 |
显示第 1 条-第 4 条，共 4 条
- 1
| 变量 | 默认值 | 用法 |
|---|---|---|
| $width-slider_handle | 24px | 滚动条圆形按钮宽度 |
| $width-slider_handle_clicked | 1px | 滚动条圆形按钮按下后描边宽度 |
| $width-slider_dot | 4px | 滚动条圆形刻度点宽度 |
| $width-slider_handle_border_disabled | 1px | 禁用滚动条圆形按钮按下后描边宽度 |
| $width-slider_handle-focus | 2px | 圆形按钮轮廓 - 聚焦 |
| $width-slider_handle_dot | 4px | 圆形按钮内部圆点宽度 |
显示第 1 条-第 6 条，共 6 条
- 1
| 变量 | 默认值 | 用法 |
|---|---|---|
| $font-slider_rail-fontSize | 14px | 滚动条轨道文本字号 |
| $font-slider_marks-fontSize | 14px | 滚动条刻度标签字号 |
| $font-slider_rail-lineHeight | 1.5 | 滚动条轨道文本行高倍数 |
显示第 1 条-第 3 条，共 3 条
- 1
| 变量 | 默认值 | 用法 |
|---|---|---|
| $transition_duration-slider_handle-bg | var(--semi-transition_duration-none) | 滑动条圆形按钮-背景色-动画持续时间 |
| $transition_function-slider_handle-bg | var(--semi-transition_function-easeIn) | 滑动条圆形按钮-背景色-过渡曲线 |
| $transition_delay-slider_handle-bg | var(--semi-transition_delay-none) | 滑动条圆形按钮-背景色-延迟时间 |
显示第 1 条-第 3 条，共 3 条
- 1
| 变量 | 默认值 | 用法 |
|---|---|---|
| $transform_scale-slider_handle | var(--semi-transform_scale-small) | 滑动条圆形按钮-放大 |
显示第 1 条-第 1 条，共 1 条
- 1