Beautiful Histogram Range Slider Component For Vue.js

Install & Download:

# Yarn 
$ yarn add vue-histogram-slider 
# NPM 
$ npm install vue-histogram-slider --save

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.