Package Exports
- vue-histogram-slider
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-histogram-slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Range slider with histogram for Vue
🚀 Quick Start
If you are a try and learn developer, you can start trying the vue-histogram-slider now using codesandbox.io.
📦 Installation
yarn
yarn add vue-histogram-slider
npm
npm i vue-histogram-slider
🔧 Usage
import Vue from 'vue';
import HistogramSlider from 'vue-histogram-slider';
import 'vue-histogram-slider/dist/histogram-slider.css';
Vue.component(HistogramSlider.name, HistogramSlider);<HistogramSlider
:width="600"
:bar-height="100"
:data="data"
/>📋 Props
| Property | Type | Default | Description |
|---|---|---|---|
| min | number | 1 | Set slider minimum value |
| max | number | 100 | Set slider maximum value |
| data | array | - | Data for histogram |
| block | boolean | false | Locks slider and makes it inactive |
| grid | boolean | true | Enables grid of values. |
| gridNum | number | 4 | Number of grid units. |
| step | number | 1 | Set sliders step. Always > 0. Could be fractional. |
| hideMinMax | boolean | true | Hides min and max labels |
| hideFromTo | boolean | false | Hides from and to labels |
| toFixed | boolean | false | Fix position of right handle. |
| fromFixed | boolean | false | Fix position of left (or single) handle. |
| forceEdges | boolean | false | Slider will be always inside it's container. |
| dragInterval | boolean | false | Allow user to drag whole range. Only in double type |
| keyboard | boolean | true | Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D. |
| type | string | double | Choose slider type, could be single - for one handle, or double for two handles |
| width | number | 600 | width of dialog |
| barHeight | number | 100 | Set max histogram bar height |
| barWidth | number | 6 | Set histogram bar width |
| barGap | number | 5 | Set histogram bar gap |
| barRadius | number | 4 | Set histogram bar radius |
| prettify | function | null | Set up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates. |
| lineHeight | number | 6 | Set slider line height |
| transitionDuration | number | 100 | Set duration to histogram bars |
| primaryColor | string | #0091ff | Primary color |
| labelColor | string | #0091ff | Label color |
| holderColor | string | #dee4ec | Holder color |
| handleColor | string | #ffffff | Slider handle color |
| gridTextColor | string | silver | Primary color |
| fontFamily | string | 'Arial, sans-serif' | Set text font family |
| fontSize | number | 12 | Set text font size |
| handleSize | number | 26 | Slider handle size |
| histSliderGap | number | 6 | Set gap between slider and histogram |
| updateColorOnChange | boolean | true | Update histogram bar color on change (recommended false for performance) |
🔧 Event
| Name | Description |
|---|---|
| start | Triggers when slider start. |
| change | Triggers when each values change. |
| update | Triggers when slider is modified by external methods update or reset. |
| finish | Triggers when user releases handle. |