Description:
A beautiful range slider component to select a range of numerical data just like a histogram.
How to use it:
1. Install the package.
# Yarn $ yarn add vue-histogram-slider # NPM $ npm install vue-histogram-slider --save
2. Import the vue-histogram-slider module.
import Vue from 'vue'; import HistogramSlider from 'vue-histogram-slider';
3. Don’t forget to import the stylesheet.
import 'vue-histogram-slider/dist/histogram-slider.css';
4. Create a Histogram Range Slider component in the template.
<template>
<div id="app">
<HistogramSlider
style="margin: 200px auto"
:width="600"
:bar-height="100"
:data="data"
:prettify="prettify"
:drag-interval="true"
:force-edges="false"
:colors="['#4facfe', '#00f2fe']"
:min="new Date(2004, 11, 24).valueOf()"
:max="new Date(2017, 11, 24).valueOf()"
/>
</div>
</template>
5. The example numerical data for the histogram.
// data.json [ "2004-11-23T22:00:00.000Z", "2005-02-28T22:00:00.000Z", "2005-03-09T22:00:00.000Z", "2005-03-21T22:00:00.000Z", "2005-05-06T21:00:00.000Z", "2005-06-01T21:00:00.000Z", "2005-06-13T21:00:00.000Z", "2005-06-30T21:00:00.000Z" ]
6. Render the data in the histogram slider.
import data from "./data.json";
export default {
name: "App",
data() {
return {
data: data.map(d => new Date(d)),
prettify: function(ts) {
return new Date(ts).toLocaleDateString("en", {
year: "numeric",
month: "short",
day: "numeric"
});
}
};
}
};
7. All default props.
data: {
type: Array,
required: true
},
min: {
type: Number
},
max: {
type: Number
},
clip: {
type: Boolean,
default: true
},
block: {
type: Boolean,
default: false
},
grid: {
type: Boolean,
default: true
},
gridNum: {
type: Number,
default: 4
},
step: {
type: Number,
default: 1
},
hideMinMax: {
type: Boolean,
default: true
},
hideFromTo: {
type: Boolean,
default: false
},
toFixed: {
type: Boolean,
default: false
},
fromFixed: {
type: Boolean,
default: false
},
forceEdges: {
type: Boolean,
default: false
},
dragInterval: {
type: Boolean,
default: false
},
keyboard: {
type: Boolean,
default: true
},
type: {
type: String,
default: "double",
validator: function(value) {
return ["double", "single"].indexOf(value) !== -1;
}
},
width: {
type: Number,
default: 650
},
barHeight: {
type: Number,
default: 100
},
barWidth: {
type: Number,
default: 6
},
barGap: {
type: Number,
default: 5
},
barRadius: {
type: Number,
default: 4
},
prettify: Function,
labelColor: {
type: String,
default: "#0091ff"
},
primaryColor: {
type: String,
default: "#0091ff"
},
holderColor: {
type: String,
default: "#dee4ec"
},
handleColor: {
type: String,
default: "#ffffff"
},
gridTextColor: {
type: String,
default: "silver"
},
lineHeight: {
type: Number,
default: 6
},
transitionDuration: {
type: Number,
default: 100
},
fontFamily: {
type: String,
default: "Arial, sans-serif"
},
fontSize: {
type: Number,
default: 12
},
histSliderGap: {
type: Number,
default: 6
},
colors: {
type: Array
},
updateColorOnChange: {
type: Boolean,
default: true
}
8. Event handlers.
- start: on start
- change: on change
- update: on update
- finish: on finish
Download Details:
Author: oguzhaninan
Live Demo: https://codesandbox.io/s/vue-histogram-slider-b7m0e?fontsize=14
Download Link: https://github.com/oguzhaninan/vue-histogram-slider/archive/master.zip
Official Website: https://github.com/oguzhaninan/vue-histogram-slider
Last Update: October 18, 2019
Install:
# Yarn
$ yarn add vue-histogram-slider
# NPM
$ npm install vue-histogram-slider --save