inputslidestyle v1.0.4

InputSlideStyle

Vue2组件,用于实现input滑动条自定义样式,支持更改轨道和滑块的样式。

Install

npm install input-slide-style

Usage

<!-- main.js -->
import InputSlideStyle from 'inputslidestyle'
Vue.use(InputSlideStyle)

<template>
    <div>
        <InputSlideStyle></InputSlideStyle>
    </div>
</template>

Props

//滑动条宽度
inputWidth: {
    type: Number,
    default: 300
},
//滑动条高度
inputHeight: {
    type: Number,
    default: 4
},
//滑块宽度
rangeWidth: {
    type: Number,
    default: 22
},
//滑块高度
rangeHeight: {
    type: Number,
    default: 22
},
//滑动条最大值
maxNum: {
    type: Number,
    default: 100
},
//滑动条最大计算比例 默认是按照100计算百分比
maxPercentage: {
    type: Number,
    default: 100
},
//是否显示中间空心
showHollow: {
    type: Boolean,
    default: true
},
//滑动条背景色
backgroundColor: {
    type: String,
    default: '#a3c6bd'
},
//滑动条进度色
speedColor: {
    type: String,
    default: '#3cb5c3'
},
//滑动条圆角
borderRadius: {
    type: String,
    default: '3px'
},
//滑块样式
rangeStyle: {
    type: Object,
    default() {
        return {}
    }
},