🚀 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 @dreysolano/vue-histogram-slider

npm

npm i @dreysolano/vue-histogram-slider

🔧 Usage

import Vue from 'vue'
import HistogramSlider from '@dreysolano/vue-histogram-slider'
import '@dreysolano/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 | | from | number | {min} | Set left/min slider position | | to | number | {max} | Set right/max slider position | | 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. |