input-slide-style v1.0.7

input-slide-style

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

Install

npm install input-slide-style

Usage

main.js

import InputSlideStyle from 'input-slide-style'
Vue.use(InputSlideStyle)

.vue

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

Demo

Demo1

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

Demo2

<template>
    <InputSlideStyle
      :showHollow="false"
      backgroundColor="#a0a0a1"
      speedColor="#5db9f8"
      :rangeStyle="rangeStyle"
    >
    </InputSlideStyle>
</template>

export default {
    data() {
        return {
            rangeStyle: {
                border: 0,
                background: "red",
                borderRadius: 0
            },
        };
    }
}

Demo3

<template>
    <InputSlideStyle
      :showHollow="false"
      backgroundColor="#a0a0a1"
      speedColor="#5db9f8"
      :inputHeight="22"
      borderRadius="0"
      :rangeStyle="rangeStyle"
    >
      <template slot="slideThumb">
        <div class="thumb">→</div>
      </template>
    </InputSlideStyle>
</template>

export default {
    data() {
        return {
            rangeStyle: {
                border: 0,
                background: "#4e6ef2",
                borderRadius: 0
            },
        };
    },
}
<style lang="less" scoped>
  .thumb {
    color: #fff;
    text-align: center;
    line-height: 22px;
  }
</style>

Props

Event