A super light weight vuejs multi-value range/slider component.
- Super light weight
- Highly customizable
- Supports multiple values/sliders
- Keypress support
- Min/Max values
npm install vue-ranger babel-loader css-loader vue-style-loader vue-template-compiler
<template>
<range v-model="MyCustomModel" min="100" max="500" step="10"></range>
</template>
<script>
import range from 'vue-ranger'
export default {
data () {
return {
MyCustomModel: [
{
SomeOtherData: "Blah",
value: 157,
},
{
SomeOtherData: "Blah",
value: 400,
},
{
SomeOtherData: "Blah",
value: 320
},
],
}
},
components: {
range
}
}
</script>
<style>
.range {
/* Custom CSS. Details below */
}
</style>
- Type: Array
- Validator: Only accepts an array of objects. The Objects must contain a
value
key. - Required
- Type: Number | String
- Default: 0
- Type: Number | String
- Default: 100
Defines the interval between legal numbers in the range.
- Type: Number | String | Array
- Default: 1
Note: While
step
accepts an Array it merely used for snapping to nearest value and provides no visual change.
Allows us to change the value
key required for each object.
- Type: String
- Default: value
Styling is primarily controled via css variables.
Below are a few examples of how they can be applied and variables available.
CSS root example (Recommended)
:root {
--bar-height: 8px;
}
CSS element example
.range {
--bar-height: 8px;
}
Inline example
<range style="--bar-height: 8px"></range>
Defines the height of the range bar.
- Default: 8px
Defines the color of the range bar.
- Default: currentColor
Defines the border radius of the range and process bar.
- Default: 0
Defines the range opacity while disabled.
- Default: 0.5
Defines the color of the thumbs.
- Default: currentColor
Defines the color of the thumb while active.
- Default: currentColor
Defines the opacity of the thumbs.
- Default: 1
Defines the opacity of the thumb while active.
- Default: 1
Defines the color of the process(smallest to largest value) range bar.
- Default: currentColor
Defines the transition duration between default to active and hover state of thumbs.
- Default: 0.2s
Defines the transition timing function between default to active and hover state of thumbs.
- Default: ease-in-out
Example
.range {
--thumb-color: #fff;
--thumb-color-active: #fff;
--thumb-shadow: .5px .5px 2px 1px rgba(0,0,0,.32);
--bar-color: #ccc;
--bar-height: 6px;
--bar-radius: 15px;
--process-bar-color: #3498db;
}
Example
.range {
--thumb-color: #fff;
--thumb-color-active: #fff;
--thumb-shadow: .5px .5px 2px 1px rgba(0,0,0,.32);
--bar-color: #ccc;
--bar-height: 6px;
--bar-radius: 15px;
--process-bar-color: #666;
}
.range__bar {
box-shadow: rgba(0, 0, 0, 0.36) 0.5px 0.5px 3px 1px inset;
}
Optionally specify an alternative <template>
for thumbs with access to the thumb data.
<range>
<template v-slot:thumb="{ thumb }">
{{ thumb.value }}
</template>
</range>
The range could also be used a loading bar with simple configuration and styling.
- Ensure the range is disabled.
- It is also recommended to add a unique loading class.
- Apply
--bar-disabled-opacity: 1
to the loading class.
<template>
<div>
<h2>Loading: {{ loading }}%</h2>
<div>
<range class="loader" v-model="loading" disabled></range>
</div>
<div>
<button type="button" name="button" @click="startLoad">
Start loading
</button>
</div>
</div>
</template>
<script>
import range from 'vue-ranger'
export default {
data () {
return {
loader: null,
loading: [
{
value: 0
}
]
}
},
components: {
range
},
methods: {
startLoad () {
this.loader = setInterval(() => {
this.loading[0].value++
if (this.loading[0].value === 100) {
clearInterval(this.loader)
}
}, 100)
}
}
}
</script>
<style>
.range.loader {
--bar-color: #ccc;
--bar-disabled-opacity: 1;
--bar-height: 15px;
--bar-radius: 15px;
--process-bar-color: #3498db;
}
</style>