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
Preview:
Changelog:
v0.3.8 (05/30/2020)
- Added more props.
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
Install & Download:
# Yarn
$ yarn add vue-histogram-slider
# NPM
$ npm install vue-histogram-slider --save