Input slider

Basic usage

<mu-input-slider 
    :min="0" :max="1" 
    :step="0.01" 
    :decimals="2" 
    :start="0" 
    :max-input-length="12" 
    :background="`default`" 
    v-model="model" 
/>
1
2
3
4
5
6
7
8
9
export default {
    data() {
        return {
            model: 0,
        }
    }
};
1
2
3
4
5
6
7

With icon

<mu-input-slider 
    :min="0" 
    :max="1" 
    :step="0.01" 
    :decimals="2" 
    :start="0" 
    :max-input-length="12" 
    :background="`default`" 
    icon="ruble-sign" 
    v-model="model"
/>
1
2
3
4
5
6
7
8
9
10
11
export default {
    data() {
        return {
            model: 0,
        }
    }
};
1
2
3
4
5
6
7

Disabled

<mu-input-slider 
    :min="0" 
    :max="1" 
    :step="0.01" 
    :decimals="2" 
    :start="0" 
    :max-input-length="12" 
    :background="`default`" 
    :icon="`fab fa-apple`" 
    :disable="true" 
    v-model="model"
/>
1
2
3
4
5
6
7
8
9
10
11
12
export default {
    data() {
        return {
            model: 0,
        }
    }
};
1
2
3
4
5
6
7

Attributes

Attribute Description Type Accepted Values Default
min Minimum value Number Only numbers 0
max Maximum value Numbern Only numbers 100
step Step value Number Only numbers 1
decimal Decimals value Number If step = 0.01 decimals should be 2 0
start Start value Number Only numbers 0
maxInputLength Max number of characters to enter Number Only numbers 18
icon Font Awesome icon String ruble-sign, dollar-sign, euro-sign, pound-sign empty string
background Background input String default or white default
disable Disabling input-slider Boolean true or false false