vuejs range自定义滑块常用

效果

简单实用

less

.wrap{

    padding: 0 30px;

    .slider{

        position: relative;

        height: 50px;

        &-tag{

            position: absolute;

            top: 0;

            left: -5%;

            width: 50px;

            text-align: center;

            span{

                display: inline-block;

                width: 100%;

                padding: 3px 0;

                background: green;

                border-radius: 5px;

                position: relative;

                color: #fff;

                font-size: 12px;

                margin-top: 5px;

                &:after{

                    content: '';

                    position: absolute;

                    left: 20px;

                    bottom: -10px;

                    width: 0px;      

                    height: 0px;

                    border: 5px solid green;

                    border-bottom-color: transparent;   

                    border-left-color: transparent;

                    border-right-color: transparent;

                }

            }

        }

        &-line{

            position: absolute;

            left: 0;

            bottom: 0;

            width: 100%;

            height: 8px;

            background: #fff;

            border: 1px solid #ddd;

            border-radius: 8px;

            overflow: hidden;

            &-color{

                width: 0;

                height: 8px;

                background-color: green;

            }

        }

    }

}

TEMPLATE

SCRIPT