aesth-vue-range-input
a completely customizable and aesthetic range input component for vue.
Table of Contents
Features
- supports all native range input attributes because it is built on the native HTML range input.
- completely customizable.
- minimal design.
- implements buffered feature (appropriate for media players).
Installation
For vue 3, include the @next tag like this - ...aesth-vue-range-input@next
npm
npm install aesth-vue-range-inputyarn
yarn add aesth-vue-range-inputCDN
jsDelivr
<script src="https://cdn.jsdelivr.net/npm/aesth-vue-range-input"></script>UNPKG
<script src="https://unpkg.com/aesth-vue-range-input"></script>Usage
If installed through npm or yarn,
<template>
<div id="app">
<aesth-vue-range-input v-model.number="rangeValue" />
</div>
</template>
<script>
import AesthVueRangeInput from "aesth-vue-range-input";
export default {
data() {
return {
rangeValue: 20,
};
},
components {
AesthVueRangeInput,
},
};
</script>Include the version number of vue in the value of the script's src attribute.
If installed through CDN, in your HTML file,
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- OR -->
<script src="https://unpkg.com/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/aesth-vue-range-input"></script>
<!-- OR -->
<script src="https://unpkg.com/aesth-vue-range-input"></script>
</head>
<body>
<div id="app">
<aesth-vue-range-input v-model.number="rangeValue" />
</div>
<script>
var app = new Vue({
el: '#app',
data: {
rangeValue: 20,
}
});
</script>
</body>Demo
A Demo of the aesth-vue-range-input installed through jsDelivr is available here.
Range Input Components
- progress: The section to the left of the thumb. This section consists of values lower than the current value as indicated by the thumb.
- thumb: The knob that the user can utilize to alter the range input's value.
- track: The section that the thumb slides on.
Props
All the props are optional.
| Prop | Description | Type | Default |
|---|---|---|---|
max |
the greatest value in the range of permitted values | Number | 100 |
value |
the value of the range input (make sure to include the .number modifier on the v-model directive) |
Number | 0 |
rangeWidth |
the width of the range input | String | 100% |
progressColor |
the color of the range input's progress section (the v-model directive has to be present for this to be visible on webkit browsers) |
String | #000c |
trackColor |
the color of the range input's track | String | #0003 |
squaredThumb |
boolean specifying whether the range input's thumb should be in a square or circle shape | Boolean | false |
thumbBorderColor |
the color of the thumb's border | String | #000 |
thumbSize |
the width and height CSS properties of the range input's thumb |
String | 20px |
buffered |
an object containing the width and color of the buffered section |
Object | undefined |
Here's an implementation with the buffered prop:
<aesth-vue-range-input
:buffered="{
width: '70%',
color: '#0008',
}"
/>License
MIT © Idorenyin Udoh