el-slider属性详解

在 Vue.js 中使用 el-slider 组件，通常是来自 Element UI 库。这个滑块组件具有多个属性，可用于配置其行为和外观。

 目前是这个样子

html部分

  <el-slider v-model="sliderValue" :min="0" :max="100" :marks="marks" range></el-slider>

js部分

const sliderValue = ref([30, 70]);
const marks = ref({
    0: '0',
    10: '',
    20: '',
    30: '',
    40: '',
    50: '',
    60: '',
    70: '',
    80: '',
    90: '',
    100: '100'
})

 

1、range 

是否为范围选择，即双滑块模式。如果不想选择范围，就把这个属性去掉，并且

const sliderValue = ref('30');改为字符串

2、min 和max 

滑块的最小值和最大值

3、step 属性

用于设置滑块每次变化的最小值。这意味着当用户拖动滑块时，滑块的值会按照 step 的设置递增或递减

 <div style="width:500px;margin:0 auto">
            <el-slider v-model="sliderValue" :step="5" :min="0" :max="100" :marks="marks" range></el-slider>

        </div>

 4、show-stops 属性

用于控制是否显示间断点，以增强用户对滑块当前位置的感知和可读性。

5、marks 属性

允许你在滑块轨道上显示自定义的标记，以便用户更好地理解滑块的含义。这些标记是一组键值对，其中键表示特定的数值位置，而值则表示在该位置显示的标签。 

即下面的数字 

  <el-slider v-model="sliderValue" :step="5" :min="0" :max="100" :show-stops="true" :marks="marks" range></el-slider>

const marks = ref({
    0: '0',
    10: '10',
    20: '20',
    30: '30',
    40: '40',
    50: '50',
    60: '60',
    70: '70',
    80: '80',
    90: '90',
    100: '100'
 
})

什么段去掉就不展示，如下 

 6、想要修改el-slider的颜色

添加样式

<style >
.el-slider__bar {
    background: red;
}
.el-slider__button {
    border: solid 2px red;
}
</style>