slide需求实现

需求

实现

选择并引用组件

    import VueSlider from 'vue-slider-component'
    import 'vue-slider-component/theme/default.css'

vue dom节点

0<vue-slider ref="slider" min=0 max=120 width="100" @drag-end="compChanged"></vue-slider>120+

样式调整

        .vue-slider {
            width: 100px;
            height: 25px;
            position: relative;
            top: 1px;
            margin: 0 10px;
        }
        .vue-slider-process {
            background-color: #000;
            border-radius: 15px;
        }
        .vue-slider-dot-tooltip-inner {
            border-color: #908633;
            background-color: #908633;
        }
        .vue-slider-dot-handle {
            cursor: pointer;
            width: 4px;
            height: 100%;
            border-radius: 0;
            background-color: #000;
            box-sizing: border-box;
            box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.1);
            position: relative;
            right: -4px;
        }
        .vue-slider-rail {
            height: 1px;
        }