FS-UI v0.1.33

Slider 滑块

使用指南

import { Slider } from 'fs-ui'
export default {
  components: {
    fsSlider: Slider
  }
}
1
2
3
4
5
6

代码演示

基本用法

<fs-slider v-model="value" @change="onChange"/>
1
export default {
  data () {
    return {
      value: 50,
    }
  },
  methods: {
    onChange (value) {
      console.log(value)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

指定选择范围

<fs-slider v-model="value" :min="10" :max="80" @change="onChange"/>
1

禁用

<fs-slider v-model="value" disabled/>
1

指定步长

<fs-slider v-model="value" :step="10" @change="onChange"/>
1

进度条高度

<fs-slider v-model="value" bar-height="4px" @change="onChange"/>
1

自定义颜色

<fs-slider
  :trackStyle="trackStyle"
  :railStyle="railStyle"
  :handleStyle="handleStyle"/>
1
2
3
4
export default {
  data () {
    return {
      value: 50,
      trackStyle: {
        backgroundColor: 'green'
      },
      railStyle: {
        backgroundColor: 'blue'
      },
      handleStyle: {
        backgroundColor: 'red'
      }
    }
  },
  methods: {
    onChange (value) {
      console.log(value)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

属性

参数 说明 类型 默认值
v-model 当前进度百分比 Number 0
disabled 是否禁用滑块 Boolean false
min 最小值 Number 0
max 最大值 Number 100
step 步长 Number 1
barHeight 进度条高度 String 2px
trackStyle 选中部分滑动条的样式 Object -
railStyle 未选中部分 Object -
handleStyle 滑块的样式 Object -

事件

event 说明 返回值
input input 事件 value: 当前进度
change 进度值改变后触发 value: 当前进度

← Rate 评分 →