vlider v1.0.4

Vlider

Input range component based on vue and custom CSS3. Highly customizable, pretty, and easy to use.

(Demo: https://kawishbit.github.io/vlider/)

Install Plugin

npm install --save vlider

<script>
    Import Vlider from "vlider"

    ...
    componenets: {
        Vlider
    }
    ...
</script>

<style>
    //import vlider in your CSS or SCSS file or directly in your Vue file
    
    @import "vlider/src/sass/vlider.scss";
    
    //or
    
    @import "vlider/dist/vlider.min.css";
</style>

Component Usage Example

<template>
    <vlider
    :id="'first'"
    :vlider-data="slider"
    :theme="'theme-dark'"
    v-model="inputRange"
    @click="vliderClick"
    >
        <template slot="bullet" slot-scope="bullet">
            <label>{{ bullet.data.label }}</label>
            <i
            class="em"
            :class="[`em-${bullet.data.extras.icon}`]"
            ></i> 
            <a target="_blank" :href="bullet.data.extras.learnMore">Learn more ?</a>
        </template>
    </vlider>
</template>
<script>
    import Vlider from "vlider";

    export default {
        name: "app",
        components: {
            Vlider
        },
        data() {
            return {
                inputRange: null,
                slider: [
                    {label: "Angry", color: "#ffc300", extras: { icon: 'angry', learnMore: 'http://localhost/'}},
                    {label: "Expressionless", color: "#ffb0fe", extras: { icon: 'expressionless', learnMore: 'http://localhost/'}},
                    {label: "Astonished", color: "#ff6bd6", extras: { icon: 'astonished', learnMore: 'http://localhost/'}},
                    {label: "Confounded", color: "#ff9d76", extras: { icon: 'confounded', learnMore: 'http://localhost/'}},
                    {label: "Okay?", color: "#51eaea", extras: { icon: 'face_with_raised_eyebrow', learnMore: 'http://localhost/'}},
                    {label: "Blush", color: "#fb3569", extras: { icon: 'blush', learnMore: 'http://localhost/'}}
                ]
            };
        },
        watch: {
            inputRange() {
                console.log(this.inputRange)
            }
        },
        methods: {
            vliderClick(value) {
                console.log(`clicked`)
                console.log(value)
            }
        }
    };
</script>
<style>
    @import "vlider/src/sass/vlider.scss"
</style>

Params

Events